Mat Autocomplete

Question

My first auto complete is working fine but the second auto complete that totally depends on the selection of the first and it will display the data then filter it. but the problem is that it only shows the data but the filtering it doesn't work

Component

export class myComponent implements OnInit,OnDestroy {

Countries = new FormControl();
options : Country[] = countries;
filteredOptions: Observable<Country[]>;

CitiesOptionControl = new FormControl();
citiesoptions : string[] = [];
citiesfilteredOptions: Observable<string[]>;

  ngOnInit(): void {

    this.filteredOptions = this.Countries.valueChanges.pipe(
    startWith(''),
    map(value => (typeof value === 'string' ? value : value.name)),
    map(name => (name ? this._filter(name) : this.options.slice())),
    );    
    
    this.citiesfilteredOptions = this.CitiesOptionControl.valueChanges.pipe(
    startWith(''),
    map(value => (typeof value === 'string' ? value : value)),
    map(name => (name ? this._filterCity(name) : this.citiesoptions.slice())),
    );

  }

   displayFn(country: Country): string {
    if(country != null)
      {
       this.countryCode = country.Code;
       this.stateRequired = country.StateRequired;
       this.postalcodeRequired = country.PostCodeRequired;
      }
     return country && country.Name ? country.Name : '';
    }  

   displayFnCity(city: any): string {
     if(city != null)
     {
      this.city = city;
     }
     return city && city ? city : '';
   }

   private _filter(name: string): Country[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => 
    option.Name.toLowerCase().includes(filterValue));
   }

   private _filterCity(name: string) : string[]{
    const filterValue = name.toLowerCase();

    return this.citiesoptions.filter(option => 
    option.toLowerCase().includes(filterValue));
   }
   
   //this is the method where the 2nd auto complete being populate
   fetch_city($event){
   this.webservice.aramex_fetch_city($event.value.Code).subscribe(data =>{
   this.cities = JSON.parse(data);
   this.citiesoptions = this.cities.Cities;
  })

  }
}

HTML

   <mat-form-field class="country">
      <mat-label style="color:white; font-size: 20px;">Select your Country</mat-label>
         <input type="text" matInput [formControl]="Countries" [matAutocomplete]="country">
           <mat-autocomplete #country="matAutocomplete" [displayWith]="displayFn" (optionSelected)="fetch_city($event.option)">
             <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                                {{option.Name}}
             </mat-option>
          </mat-autocomplete>
        </mat-form-field>


  <mat-form-field class="city">
     <mat-label style="color:white; font-size: 20px;">Select your City</mat-label>
        <input type="text" matInput [formControl]="CitiesOptionControl" [matAutocomplete]="city">
            <mat-autocomplete #city="matAutocomplete">
              <mat-option *ngFor="let option of citiesoptions | async" [value]="option">
                            {{option}}
      </mat-option>
     </mat-autocomplete>
   </mat-form-field>

I dont know even know what to do.. coz the data of 2nd auto complete really depends on the selection of the 1st auto complete..

any suggestion? thank you!