mat-selection-list maintain the previous checked item

I have been created a UI, using mat-selection-list with checkboxes. The UI look like given below

When i click on the Parent1(left side) ,populate the value on the right side and also we can select the check boxes. html code

 <mat-selection-list #searchList class="search-selection-list"  [(ngModel)]="selectedOptions" >
      <mat-list-option checkboxPosition='before' class='parent-item'  [value]='0'
                       (click)='toggleAllSelection(searchList)'>
        {{parentName}}
      </mat-list-option>
      <mat-divider></mat-divider>
      <mat-list-option class='child-list' checkboxPosition='before' *ngFor='let data of parentData'
                       (click)='onClicked(searchList)' [value]="data" [(selected)]= data.isSelected>
        {{data.value}}
      </mat-list-option>
    </mat-selection-list>

.ts file

parentData:any = ['child1','child2']
parentName ='Parent1'

parentData and parentName getting from back-end API's.

If am select the parent2, parent related data will populate on the right side and if i select the Parent1 previously selected checck-box will unchecked.

Attempt 1 changed data structure

parentData:any = [{value:'child1',isSelected: false},{value: 'child2',isSelected: true}]

issue faced: when i deselected the checkbox, the deselected item removed from pranetData

It will be grate someone give solutions.

Thanks in advance.