Angular ngModelChange data inconsistency

Facing an issue where a key has same value in another object in an array of objects. When ngModelChange is trigerred for 2nd one the data obtained in the ts file is of first one.

I have data as follows:

[
{
name: ‘Sample’,
subCategory: [
{
name: ‘View’,
permissions: [
{name: ‘sample 1’, description: ‘description 1’}
],
isPresent: true
}
]
},
{
name: ‘Sample 2’,
subCategory: [
{
name: ‘View’,
permissions: [
{name: ‘sample 2’, description: ‘description 2’}
],
isPresent: true
}
]
}
]

My parent component fetches this data from store and passes to a child component.

<div *ngFor="let item of (data|async);trackBy: trackByFn;">
  <app-child [childData]="item"></app-child>
</div>

In my child component I loop over the object and display the ui.

<div *ngFor="let sub of childData.subCategory; let i = index; trackBy: trackByFnMain;">
  <div>
    {{sub.name}}
  </div>

  <div>
    <input 
      type="checkbox" 
      [ngModel]="sub.isPresent
      (ngModelChange)="updateData($event, sub)"
    >
    <label [for]="sub.name + i"></label>
  </div>
</div>

The name key value in sub is ‘View’ Which is same for two of the objects. While a checkbox/toggle is trigerred for the second item in the array the value received in updateData is of the first one:

{
    name: 'View',
    permissions: [
      {name: 'sample 1', description: 'description 1'}
    ],
    isPresent: true
  }

I modified the trackBy to as follows, still no change occurred. Only time it worked was when i changed name value in one of the objects to some other value.

trackByFnMain(index: number, subCategory: a): strinnyg {
  return `${subCategory.name}::${index}`;
}