ngx-mat-select-search is not loading the data in dropdown after init - angular12

Question

Reference used:
https://stackblitz.com/edit/github-yn8zve-xl2vcs?file=src%2Fapp%2Fexamples%2F01-single-selection-example%2Fsingle-selection-example.component.ts
Values are loaded into countrydropdown but after I am clicking it for first time . After that all is working fine . only concern is value not loading at the page loads .
here is the typescript:
ngOnInit(): void {
this.orgNameSearchInit();
this.getCountryCodes();
// load the initial bank list
console.log("inside nginit ")
this.countryArrFilterDropdown.next(this.countryArray.slice());
//to listen any change in search box
this.searchFormControl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterCodes();
});
}
protected filterCodes() {
if (!this.countryArray) {
return;
}
// get the search keyword
let search = this.searchFormControl.value;
console.log("searched value: "+ search);
if (!search) {
console.log(this.countryArrFilterDropdown.next(this.countryArray.slice()));
this.countryArrFilterDropdown.next(this.countryArray.slice());
return;
} else {
search = search.toLowerCase();
}
console.log("after ifelse");
// filter the Country
this.countryArrFilterDropdown.next(
this.countryArray.filter((countrys) => countrys.countryName.toLowerCase().indexOf(search) > -1)
// this.banks.filter((bank) => bank.name.toLowerCase().indexOf(search) > -1)
);
}
ngAfterViewInit(): void {
this.setInitialValue();}
here is the html :
<div class="col-sm-2">
<mat-form-field>
<mat-select [formControl]="testFormControl" placeholder="Code" #singleSelect>
<mat-option>
<ngx-mat-select-search [formControl]="searchFormControl" placeholderLabel="Search"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let countryArrFilterDropdowns of countryArrFilterDropdown | async"
[value]="countryArrFilterDropdowns.countryCode">
{{countryArrFilterDropdowns.countryName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>