I want to create group of checkboxes from formgroup and formarray

Question

soo i want to create a group of checkboxes from locs array of my JSON actually i created a custom function to get especific part of formgroup by index and return array then on my html with for iterate this result and create list of checkboxes, but when i change the state of this checkbox don't change the value from my FormGroup.

this is my principal .TS

ngOnInit() {
    this.dynamicForm = this.formBuilder.group({
       data: new FormArray([])
    });  
}

get f() {
  return this.dynamicForm.controls;
}
get t() {
  return this.f.data as FormArray;
}

createFormsDynamically() {
    const obj = Object.values(this.DisbursementDetail);
   
    if (this.t.length < obj.length) {
      for (let i = this.t.length; i < obj.length; i++) {
        this.t.push(
          this.formBuilder.group({
            item: [obj[i]['itemRM']],
            stockingUOM: [obj[i]['stockUoM']],
            moq: [obj[i]['disbursementRMItemMOQ']],
            required: [obj[i]['disbursementRMQty'], Validators.required],
            locsArray: [obj[i]['locs']]            
          })
        );
      }
    } else {
      for (let i = this.t.length; i >= obj.length; i--) {
        this.t.removeAt(i);
      }
    }
  }

this is my JSON from RESTAPI.

this.DisbursementDetail = [{
    "itemRM": "33237",
    "disbursementFac": "01",
    "disbursementTicket": "D-211227-0005",
    "disbursementUser": 24104,
    "disbursementSO": "566943",
    "stockUoM": "EA",
    "disbursementRMItemMOQ": 30000,
    "warehouse": "RM",
    "disbursementRMQty": "100.00",
    "locs": [{
        "loc": "TP08",
        "oh": 29900,
        "toTake": 100,
        "checked": true
    },{
        "loc": "TP09",
        "oh": 29300,
        "toTake": 50,
        "checked": true
    },{
        "loc": "TP10",
        "oh": 29300,
        "toTake": 50,
        "checked": false
    }]
}]

// i create this functions to get locs array by index from my HTML but i don't sure thats the correct way to do.
dataLoc(index){
  return this.t.getRawValue()[index].locsArray as FormArray;
}

and this is my file of .HTML

<ion-col size="12" size-md="12" *ngIf="showSlide">
        <form [formGroup]="dynamicForm" (ngSubmit)="nextSlide()">
          <swiper #swiper [config]="confiSlide" (slideChange)="onSlideChange()">
            <ng-template swiperSlide *ngFor="let dis of t.controls; let i = index">
              <div class="slide" [formGroup]="dis">
                <ion-card>
                  <ion-card-content>
                    <ion-row class="ion-justify-content-center">
                      <ion-col size="6" size-sm="6" size-xs="8">
                        <ion-item>
                          <ion-label>Item </ion-label>
                          <ion-input formControlName="item" readonly></ion-input>
                        </ion-item>
                        <ion-item>
                          <ion-label>UoM</ion-label>
                          <ion-input formControlName="stockingUOM" readonly></ion-input>
                        </ion-item>
                      </ion-col>
                    </ion-row>
                    <div *ngFor="let loc of dataLoc(i); let s = index">
                      <ion-list>
                        <ion-item>
                          <ion-label>{{loc.loc}}, OH: {{loc.oh}}, Take: {{loc.toTake}}</ion-label>
                          <ion-checkbox slot="end" checked="loc.Checked" formControlName="locsArray.Checked"></ion-checkbox>
                        </ion-item>
                      </ion-list>
                    </div>
                    <ion-row>
                      <ion-col size="12" size-sm="12">
                        <ion-item>
                          <ion-label>MOQ:</ion-label>
                          <ion-input formControlName="moq" readonly type="number"></ion-input>
                        </ion-item>
                      </ion-col>
                    </ion-row>
                    <ion-row>
                      <ion-col size="12" size-sm="12">
                        <ion-list lines="full" class="ion-no-margin">
                          <ion-list-header> Need </ion-list-header>
                          <ion-input formControlName="required" readonly></ion-input>
                        </ion-list>
                      </ion-col>
                    </ion-row>
                    <ion-row>
                      <ion-col *ngIf="slidePrevButton">
                        <ion-button (click)="prevSlide()" color="danger">
                          <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
                          Preview
                        </ion-button>
                      </ion-col>
                      <ion-col *ngIf="slideNextButton">
                        <ion-button type="submit">
                          <ion-icon name="arrow-forward-outline" slot="start"></ion-icon>
                          Next
                        </ion-button>
                      </ion-col>
                      <ion-col *ngIf="!slideNextButton">
                        <ion-button (click)="saveDisbursementDetail()" color="success">
                          <ion-icon name="save-outline" slot="start"></ion-icon>
                          Save
                        </ion-button>
                      </ion-col>
                    </ion-row>

                  </ion-card-content>
                </ion-card>
              </div>
            </ng-template>
          </swiper>
        </form>
      </ion-col>