angular Form array for checkboxes - control.registerOnChange error

I have scenario that I need to update dynamically generated checkboxes all the checkboxes are generate from the db

form initializing with the

const filtered = advertisementDetails.workingDistricts.filter(el => {
    return el != null;
});
filtered.map(subAttData => {
    console.log(subAttData, 'DistUpdate');

    const newitem = this.fb.group({
        index: subAttData.index,
        value: subAttData.value,
    });
    this.getworkingDistricts.push(newitem);
});

getter for form array

get getworkingDistricts(): FormArray {
 return this.suppliersForm.get('workingDistricts') as FormArray;
}

html for displaying data

 <div class="check-box-main" *ngFor="let districts of getworkingDistricts.value  ; let i = index">
   <ng-container [formArrayName]="workingDistricts" >
      <input   [formControl] ="districts"  id="districts" (click)="servicedest($event)" value=    type="checkbox"><span></span>
   </ng-container>
</div>

Html for file