Create multiple ngx-bootstrap Sortables with Angular

Question

I am trying to create multiple Sortable objects in Angular(v17) using ngx-bootstrap (https://valor-software.com/ngx-bootstrap/#/components/sortable?tab=overview).

In the pic below, I am trying to create a Sortable control for each array**(highlighted)**.

<ng-container *ngFor="let projectDetail of (projectSearchResults$ | async) as projectSearchResults">
  <div class="col-lg-8" *ngFor="let summary of projectDetail.summaryDatas; ; let i = index">
    <bs-sortable [(ngModel)]="projectDetail.fieldPlanSummaryDatas[i]" fieldName="markNum"
    itemClass="sortable-item" itemActiveClass="sortable-item-active" placeholderItem="Drag here"
    placeholderClass="placeholderStyle text-center" wrapperClass="sortable-wrapper"></bs-sortable>
  </div>
</ng-container>

If I use the index on the ngModel for the sortable, the page becomes unresponsive. I'd appreciate any help that can be provided.

Thanks in advance!