Angular checkbox list with mat-checkbox

I have a form with checkboxes in the form of a list. When I check a checkbox, the value updates in my formgroup but at the HMI level, the checkbox does not remain checked

ngOnInit(){
    const validators = [];
    if(this._isRequired){
      validators.push(Validators.required);
    }
    this.controlFormGroup.addControl(this.controlName, new FormArray([]));
    
    this.addCheckboxes();
    this.onComponentReady.emit(this.controlFormGroup);
  }
  get optionsFormArray() {
    console.log(this.controlFormGroup.controls[this.controlName]);
    return this.controlFormGroup.controls[this.controlName] as FormArray;
  }
  private addCheckboxes() {
    this.options.forEach(() => this.optionsFormArray.push(new FormControl(false)));
  }

<div [formGroup]="controlFormGroup">
    <div [formArrayName]="controlName" *ngFor="let option of optionsFormArray.controls; let i = index" [ngClass]="orientation">
        <mat-checkbox [formControlName]="i">
            
        </mat-checkbox>
    </div>
    <mat-error *ngIf="controlFormGroup.controls[controlName].touched && controlFormGroup.controls[controlName].hasError('required')">
        <span [innerHTML]="errorMessage"></span>
    </mat-error>
</div>

I don't understand the problems