Angular Dynamic Nested Checkbox selection Problem

I was working on a multi-step complex registration form and I am stuck because i am facing this issue. there is a dynamic dependent nested checkbox and when i select the parent the child check box renderes without a problem but when i select a child check box and the try to select a parent box the child box will all get checked. is there any way to fix this?

my component.ts

export class SubCategoriesComponent  {
  form!: FormGroup
  @Input('subcategories') set _(value: any) {
    this.form = value as FormGroup;
  }
  @Input() mainCategoryList!: Observable<any[]>;

  isSelected = false;


  subCategoryInfo!: SubCategory[];
  subCategorycheck!: SubCategory[];

  checkedList: any;
  masterSelected!: boolean;

  constructor() { }

//   ngOnInit(): void {
//         console.log(this.mainCategoryList);
//     this.getSubCategories();
// }

  ngOnChanges(changes: SimpleChanges): void {
    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
    //Add '${implements OnChanges}' to the class.
    console.log(changes);
    if(changes.mainCategoryList && changes.mainCategoryList.currentValue) {
      let subCategoryInfo = changes.mainCategoryList.currentValue;
      this.getSubCategories(subCategoryInfo);
    }
  
  }

  getSubCategories(subCategoryInfo: SubCategory[]){
    of(subCategoryInfo).pipe(map((item:SubCategory[])=>item),
      map((items:any) =>
       items.map((item:SubCategory) => {
            let data = {
              id: item.id,
              name: item.name,
              subCategories: item.subCategories,
              // isSelected: item.isSelected
            }
            return data;
       }
    
    ))).subscribe((response:SubCategory[])=>{
      this.subCategoryInfo = response;

      this.subCategoryInfo.forEach(element => {

        this.subCategorycheck = element.subCategories
      });
    console.log(this.subCategoryInfo);
    console.log(this.subCategorycheck);

    })
  }

  
  // The master checkbox will check/ uncheck all items
  checkUncheckAll() {
    for (var i = 0; i < this.subCategorycheck.length; i++) {
      this.subCategorycheck[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
  }

  // Check All Checkbox Checked
  isAllSelected() {
    console.log(this.subCategorycheck);
    this.masterSelected = this.subCategorycheck.every(function (item: any) {
      console.log(item);
      return item.isSelected == true;
    })
    this.getCheckedItemList();
  }

  // Get List of Checked Items
  getCheckedItemList() {
    this.checkedList = [];
    for (var i = 0; i < this.subCategorycheck.length; i++) {
      if (this.subCategorycheck[i].isSelected)
        this.checkedList.push(this.subCategorycheck[i]);
    }
    // this.mainCategoriesCheckedList.emit(this.checkedList);
    console.log(this.checkedList);
  }

}

my component.html

<form [formGroup]="form" >

<nz-checkbox-wrapper style="width: 100%;"
*ngFor="let data of subCategoryInfo;">
<!-- <div class="container" *ngIf="data.subCategories.length !== 0"> -->
  <h6 style="text-align: left; margin-top: 10px;">
    </h6>
<!-- </div> -->
  <div class="form-check row"
    *ngFor="let d of data.subCategories;">
    <input formControlName="subCategoryId"
    (change)="isAllSelected()"
    class="form-check-input" type="checkbox"
      value="" required
      ><label for="option-"></label>

  </div>

</nz-checkbox-wrapper>
</form>

i didn't bind the ngModel because that is what I need your help with on how to do it with out causing the problem i mentioned. Thanks in advance.