Can't bind observable to mat chips autocomplete

I have a search engine and I need to register observable and gets dropdown autocomplete suggestion but even if observable is triggered which I can see inside tap I can't seem to make the list load inside my template dropdown

here is my code:

<mat-form-field>
<mat-chip-grid #chipGrid aria-label="Value selection">
@for (fruit of fruits(); track $index) {
<mat-chip-row (removed)="remove(fruit)">
//logic for fow
</mat-chip-row>
}
</mat-chip-grid>
<input placeholder="Start typing to see suggestions" #fruitInput formControlName="value"
[matChipInputFor]="chipGrid" [matAutocomplete]="auto"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"/>

</mat-form-field>
<div *ngIf="getChipsValueDropdowns(select.value, i) | async as accounts">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let account of accounts"
[value]="account">{{account.name}}</mat-option>
</mat-autocomplete>
</div>
<mat-autocomplete #auto="matAutocomplete">
<mat-option> Loading ...</mat-option>
</mat-autocomplete>


And in my ts file I have function:

getChipsValueDropdowns(key: string, index: number): Observable<Account[]> {
if (key === 'account') {
return this.registerAccountListener(key, index)
}
return of([])


}

registerAccountListener(key: string, index: number) {
const control: FormControl = this.formArray.controls[index].get('key') as FormControl
if (control.value === key) {
return this.accountService.searchAccounts('SHE').pipe(
debounceTime(300),
distinctUntilChanged(),
map((response: { body: Account[] | null }) => {
return response.body ?? []
}),
tap((accounts) => {
console.log('Emitting accounts:', accounts)
}),
)
}
return of([])
}

Continue reading...