form into ngfor and getting data in array

Problem- Here I'm using a single HTML Form. but in many cases, I'll get multiple counts of rooms and multiple counts of adults according to rooms.so I'm using *ngFor for multiple times of forms according to roomwise adults. So in case, I have 2 rooms, and in particular rooms, I have 2 adults. so this form will repeat 4 times according to adults. I have to save the all data in an array. But in FormGroup I'm getting only one form data only even I fill all forms.

this form repeats according to roomdetails.adult

HTML File

<div *ngfor="let item of roomdetails; let i = index" [attr.data-index]="i">
  <form [formgroup]="ravelerDetails">
    <div class="row">
      <mat-card>
        <h2 class="titleHeader">ROOM {{i+1}}</h2>
        <ng-container formgroupname="customer_detail" *ngfor="let items of item.adult;>
          <mat-form-field appearance="outline" color="primary" class="col-md-2">
            <mat-label>Salutation</mat-label>
            <mat-select [formcontrol]="salutation">
              <mat-option value="Mr">Mr.</mat-option>
              <mat-option value="Mrs">Mrs.</mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" color="primary" class="col-md-5">
            <mat-label>First Name</mat-label>
            <input matinput placeholder="First Name" [formcontrol]="first_name" maxlength="25">
            <mat-error *ngif="first_name.hasError('required')">
              <strong>First Name</strong>is required.
            </mat-error>
          </mat-form-field>
          <mat-form-field appearance="outline" color="primary" class="col-md-5">
            <mat-label>Last Name</mat-label>
            <input matinput placeholder="Last Name" [formcontrol]="last_name" maxlength="25">
            <mat-error *ngif="last_name.hasError('required')">
              <strong>Last Name</strong>is required.
            </mat-error>
          </mat-form-field>
        </ng-container>
      </mat-card>
    </div>
  </form>
</div>

TS File

initDos() {
  return this.fb.group({
    salutation: this.salutation,
    first_name: this.first_name,
    last_name: this.last_name,
  })
}

travellDetiles() {
  this.ravelerDetails = this.fb.group({
    customer_detail: this.fb.array([this.initDos()]),
    checkin_date: this.hotelSearch.checkin_date,
    checkout_date: this.hotelSearch.checkout_date,
    no_adult: this.hotelSearch.no_adult,
    no_children: this.hotelSearch.no_children,
    no_room: this.hotelSearch.no_room,
  });
}

get dosArray() {
  return this.ravelerDetails.get('customer_detail') as FormArray;
}

dos() {
  this.dosArray.push(this.initDos());
}

removeDos(index) {
  this.dosArray.removeAt(index);
}

Output

{
  "no_room": "1",
  "checkin_date": "2022-11-5",
  "checkout_date": "2022-11-6",
  "no_adult": "2",
  "customer_detail": [{
    "room_number": "1",
    "salutation": "Mr",
    "first_name": "test",
    "last_name": "test",
  }, {
    "room_number": "1",
    "salutation": "Mr",
    "first_name": "test2",
    "last_name": "test2",
  }],
}