Multiple autocomplete material angular shows same dropdown

Question

My multiple dropdowns work but it shows the same value. I am following angular material component.

I have created different filtered for each array object still shows the same dropdown.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';
import { UsersComponent } from '../users/users.component';

@Component({
  selector: 'app-accommodation',
  templateUrl: './accommodation.component.html',
  styleUrls: ['./accommodation.component.css']
})
export class AccommodationComponent {

      myControl = new FormControl();

      country = [
        new UsersComponent('United States'),
        new UsersComponent('Canada'),
        new UsersComponent('Brazil'),
        new UsersComponent('India'),
        new UsersComponent('China'),
        new UsersComponent('Japan'),
      ];

      nationality = [
        new UsersComponent('American'),
        new UsersComponent('Canadian'),
        new UsersComponent('Indian'),
        new UsersComponent('Chinese'),
        new UsersComponent('African'),
        new UsersComponent('Japanese'),
      ];


      countryFilter: Observable<UsersComponent[]>;
      nationalityfilter: Observable<UsersComponent[]>;

      ngOnInit() {
        this.countryFilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.country.slice()),
          );
        this.nationalityfilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.nationality.slice()),
          );
      }


      filter(name: string): UsersComponent[] {

        return this.country.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0),
               this.nationality.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);       
      }

      displayFn(users?: UsersComponent): string | undefined {
        return users ? users.name : undefined;
      }

}

Below is the HTML code, where I have changed id as per this post. Still doesn't work.

        <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Country" aria-label="Country" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of countryFilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->
    <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->

After @Mjstk update it worked awesome but still shows some error

Answer 1

You have to change the name of the second autocomplete, so it doesnt link to the first one aswell, change "auto" to "autoNationality": [matAutocomplete]="autoNationality">

<mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="autoNationality">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>