MDB Auto Completer , Remote data not working

Expected behavior I expect to see a dropdown list of matched labels

Actual behavior I Keep getting , "I have found no results

Resources (screenshots, code snippets etc.)

    staffSearchText = new Subject();

  staffResults: Observable<any>;
  //staff: any[] ;
  staff: any = {
    results: [
      {id: '12345', label: 'Mustapha Abubakar', code: 'O'},
      {id: '6789', label: 'Buhari Sani', code: 'DM'},
      {id: '3214', label: 'Aliyu Abu', code: 'PM'},
      {id: '78235', label: 'farida lawal', code: 'M'},

    ]
  }

  constructor(private memoService: MemoService) { }

  ngOnInit() {

    this.staffResults = this.staffSearchText
      .pipe(
        startWith(''),
        map((value: string) =>  this.filter(value))
      );
  }

  filter(value: string): string[] | undefined {

    const filterValue = value.toLowerCase();
    if (this.staff) {

      console.log('see this' + this.staff['results']);
      return this.staff['results'].filter((item: any) =>{console.log(item); return item.label.toLowerCase().includes(filterValue)});


    }
  }

html file

   <div class="md-form">

  <input
    type="text"
    class="completer-input form-control mdb-autocomplete"
    [ngModel]="staffSearchText | async"
    (ngModelChange)="staffSearchText.next($event)"
    [mdbAutoCompleter]="auto"
    placeholder="Memo From"
  />
  <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(" [clearButton]="true">
    <mdb-option *ngFor="let option of staffResults | async" [value]="option.label">

        {{option.label}}
    </mdb-option>
  </mdb-auto-completer>
</div>