Text fields reset to same value on adding new element to array

I have a variable called courses which is an array of objects.
In the template, an ngFor outputs the content of this array.

my template:

<div>
  <div class="row" *ngFor="let relacao of courses let i = index">
    <div>
      <input 
          type="text" 
          name="courses[i].label" 
          [(ngModel)]="courses[i].label"
      />
    </div>
  </div>
</div>
		
<div>
  <button (click)="addCourse()">add</button>
</div>

my ts:

addCourse() {
  this.courses.push({ label: 'test' });
}

When i change the value of an array element using the <input>and add a new item to the array, it resets all the labels to the initial value (null).

I need the input value not to be reset when adding a new record to the array. Can someone help me?

The exact code seems to be working fine for me.

I am still sharing the code please check if there are any differences

<div>
  <div class="row" *ngFor="let relacao of courses; let i = index">
    <div>
      <input
        type="text"
        name="courses[i].label"
        [(ngModel)]="courses[i].label"
      />
    </div>
  </div>
</div>

<div>
  <button (click)="addCourse()">add</button>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  courses: { label: string }[] = [];

  addCourse() {
    this.courses.push({ label: 'test' });
  }
}

accidentally i found the problem. adding {{ i }} to the input name solved the problem

<div>
  <div class="row" *ngFor="let relacao of courses let i = index">
   <div>
    <input 
      type="text" 
      name="courses[{{i}}].label" 
      [(ngModel)]="courses[i].label"
    />
   </div>
  </div>
</div>

thank you all!