I am creating multiple form groups, but while submitting in one form, it is returning value of last entered form.

export class ExpansionOverviewExample {
  panelOpenState = false;
  tables: string[] = ['one', 'two', 'three', 'four', 'five'];

  formData = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

  onConvertButtonClick() {
    alert(this.formData.value['firstName']);
    alert(this.formData.value['lastName']);
    console.log(this.formData.value);
  }
}

<mat-accordion>
  <mat-expansion-panel *ngFor="let table of tables">
    <mat-expansion-panel-header>
      <mat-panel-title> {{table}} </mat-panel-title>
    </mat-expansion-panel-header>
    <form [formGroup]="formData" (ngSubmit)="onConvertButtonClick()">
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput type="text" formControlName="firstName" />
      </mat-form-field>

      <mat-form-field>
        <mat-label>Last Name</mat-label>
        <input matInput type="text" formControlName="lastName" />
      </mat-form-field>
      <button>submit</button>
    </form>
  </mat-expansion-panel>
  <mat-expansion-panel
    (opened)="panelOpenState = true"
    (closed)="panelOpenState = false"
  >
  </mat-expansion-panel>
</mat-accordion>

How to get value of particular form value on form submit?