ngModel instead of value in mat-select, multi is set true, with ngx-mat-select-search, causing the page using the component to be non responsive

Question

With ngx-mat-select-search version 7, I found we have to use formControl or ngModel for the mat-select containing it. But doing that causing the page unresponsive. I am creating a reusable multiselct input component, which will be expecting formControl, which is optional. "value" is an input to the multiselect component.

below is the code

<mat-form-field>
  <mat-label>{{ label | translate }}</mat-label>
  <mat-select
    id="{{ id }}"
    [errorStateMatcher]="errorStateMatcher"
    multiple
    [required]="required"
    [ngModel]="value"
    (selectionChange)="onSelectionChange($event.value)"
    (openedChange)="openedChange($event)"
    panelClass="panelClass-{{ !inputOptions.length || busy ? 'busy' : '' }}"
  >
    <ng-container>
      <mat-option>
        <ngx-mat-select-search
          ngModel
          (ngModelChange)="filterString = $event"
        >
          <inf-icon ngxMatSelectSearchClear icon="clear"></inf-icon>
        </ngx-mat-select-search>
      </mat-option>
    </ng-container>
    <mat-option
      *ngFor="let option of options; trackBy: track"
      id="{{ id }}-option-{{ option.value }}"
      [value]="option.value"
    >
      {{option.label}}
    </mat-option>
  
    
  </mat-select>
</mat-form-field>

In mat-select, replaceing ngModel with value worked, but the options and selected ones were working weird. Let's say we have 4 options, a1, a2, b1,b2 , and I have selected a1. Value will be set to a1, but when I enter search, b, option values will changed to b1 and b2, and the selected value is reset.