ngx-chips autocompleteItems dropdown is not showing with async data

Question

Dropdown is not populating data after the search. When the second time api is called then the dropdown is showing but not on the first search.

I want the list to be updated as soon as it receives the data from the api and the variable is updated.

I also tried the autocompleteObservable but it does not with with my current as I have to call the api in a service and other data is also required to be send to the api.

I have pasted the code below.

TS CODE:-

items: any[];
items$ = new Subject<any[]>();
items$$: Observable<any[]>;

constructor(private formbuilder: FormBuilder,
            private service: TestService){
              this.items$$ = this.items$.asObservable();
            }

ngOnInit() {
  this.formbuilder.group({fullName: []})
}

autoComplete(text: string): void {
        this.service
          .testData(text)
          .subscribe((data) => {
            this.items$.next(data);
    }

<tag-input [onlyFromAutocomplete]="true"
                    formControlName="fullName" 
                    [identifyBy]="'id'"
                    [displayBy]="'name'"
                    theme="dark" 
                    ripple="false" 
                    placeholder=""
                    (onTextChange)="autoComplete($event)"
                    secondaryPlaceholder="" 
                    #input>
    <tag-input-dropdown [identifyBy]="'id'" 
                        [displayBy]="'name'" 
                        zIndex="9999"
                        [appendToBody]="false"
                        [limitItemsTo]="5"
                        [autocompleteItems]="items$$ | async">
    </tag-input-dropdown>
  </tag-input>