Remove an item within a checkbox array after all have been selected

I have a table with checkboxes that works almost fine, except for the problem that when all the checkboxes are selected and some option is subsequently unchecked, instead of removing the unchecked box, the entire array is removed. The code to remove an option from the array works only when it is selected individually.

I am using the following method to remove the item:

this.arrayData.removeAt(
        this.arrayData.value.findIndex((x: any) => x.Id === option.Id)
      );

The demo I have on stackblitz: Demo

.HTML

<form [formGroup]="demoFormGroup" style="margin-top:20px; margin-bottom:30px">
  <div formArrayName="arrayForm">
    <table border="1">
      <tr>
        <th style="text-align: right;">AllCheck</th>
        <th>
          <mat-checkbox [checked]="allCheck==1" (change)="onChangeAll($event,1)"></mat-checkbox>
        </th>
        <th>
          <mat-checkbox [checked]="allCheck==2" (change)="onChangeAll($event,2)"></mat-checkbox>
        </th>
      </tr>
      <tr>
        <th></th>
        <th>YES</th>
        <th>NO</th>
      </tr>
      <tr *ngFor="let x of data; let i = index">
        <td></td>
        <td>
          <mat-checkbox (change)="onChange($event,x,1)" [checked]="x.Condition==1"></mat-checkbox>
        </td>
        <td>
          <mat-checkbox (change)="onChange($event,x,2)" [checked]="x.Condition==2"></mat-checkbox>
        </td>
      </tr>
    </table>
  </div>
</form>
<pre></pre>

.TS

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  demoFormGroup: FormGroup;
  data: any;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.demoFormGroup = this.fb.group({
      arrayForm: this.fb.array([])
    });

    this.data = [
      {
        Id: 4,
        Description: 'Option 1',
        Condition: 0
      },
      {
        Id: 6,
        Description: 'Option 2',
        Condition: 0
      },
      {
        Id: 8,
        Description: 'Option 3',
        Condition: 0
      }
    ];
  }
  get arrayData(): FormArray {
    return this.demoFormGroup.get('arrayForm') as FormArray;
  }

  selectedOptions: any;
  selectedIds: any;
  allCheck = 0;

  onChange(event: any, option: any, enabled: any) {
    option.Condition = enabled;
    if (event.checked) {
      if (this.arrayData.length == 0) {
        this.arrayData.push(new FormControl(option));
        this.onSelectedOptions();
      } else if (this.allCheck != 0) {
        return;
      } else {
        if (!this.selectedIds.includes(option.Id)) {
          this.arrayData.push(new FormControl(option));
        }
        this.onSelectedOptions();
      }
    } else {
      this.arrayData.removeAt(
        this.arrayData.value.findIndex((x: any) => x.Id === option.Id)
      );
    }
  }
  onSelectedOptions() {
    this.selectedOptions = this.arrayData.value;
    this.selectedIds = this.selectedOptions.map((option: any) => option.Id);
  }
  onChangeAll(event: any, n: any) {
    this.onClearArrayAll();
    this.allCheck = n;
    this.data.Condition = n;
    if (event.checked) {
      if (n == 1) {
        this.data.forEach((x: any) => (x.Condition = 1));
        this.arrayData.push(new FormControl(this.data));
      } else if (n == 2) {
        this.data.forEach((x: any) => (x.Condition = 2));
        this.arrayData.push(new FormControl(this.data));
      }
    } else {
      this.onClearArrayAll();
      this.allCheck = 0;
    }
    console.log(this.arrayData.value);
  }
  onClearArrayAll() {
    this.data.forEach((x: any) => (x.Condition = 0));
    for (let i = this.arrayData.length - 1; i >= 0; i--) {
      this.arrayData.removeAt(i);
    }
  }
}