Выпадающее значение переопределяется в ngForm

Question

Повторение выпадающего в ngForm, а также выполнение операций добавления и удаления в раскрывающемся списке. Вот ссылка и код

Ссылка - Angular -Выберите с -ngForm

Код -

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
    <div *ngFor="let item of itemList; let i = index">
        <ng-container *ngIf="item.visible"> {{i}} -- {{item.myDropDown}}
           <select [(ngModel)]="item.myDropDown" name="selectdrop-{{i}}" (ngModelChange)="onChangeofOptions($event)" >
             <option value="one">One</option>
             <option value="two">Two</option>
             <option value="three">Three</option>
           </select>
           <button type="button" (click)="delete(i)">delete</button>
        </ng-container>
    </div>
    <button type="button" (click)="pushfunction()">push</button>
</form>

ts файл

export class AppComponent  {
  itemList = [{myDropDown: ''}]

  pushfunction(){
    this.itemList.push({myDropDown: 'two'})
  }

  delete(index) {
    this.itemList.splice(index, 1);
  }
}

Когда я нажимаю на кнопку push в одном новом раскрывающемся меню добавляется и выбирается опция three в новом добавленном раскрывающемся списке. Затем я удаляю первый раскрывающийся список (по нулевому индексу) и снова нажимаю кнопку push, затем добавляется один новый раскрывающийся список, и значение обоих раскрывающихся списков изменяется на two, но значение атрибута myDropDown для нулевого индекса в массиве itemList равно three, но в раскрывающемся списке оно показывает two, не знаю, почему оно переопределяется в раскрывающемся списке. Любая идея, почему она ведет себя так, я думаю из-за ngForm.