Angular CDK Drag and Drop Issue with Form Groups

Question

I'm working on implementing drag-and-drop functionality for form groups in my Angular application using the Angular CDK. While I've successfully enabled the dragging and dropping of individual fields between form groups, I encountered an issue when attempting to drag and drop entire form groups. Specifically, when dropping a form group, the currentIndex is consistently showing as 0, while the previousIndex is correct.

I've already implemented dragging and dropping functionality for individual fields within form groups using Angular CDK, which is working as expected. To extend this functionality to form groups themselves, I modified the code to handle the dropping of entire form groups.
My HTML code -

<div cdkDropListGroup class="overall-container flex-row">
  <div class="flex-grow admin-grid-layout padding-right-regular" cdkDropList (cdkDropListDropped)="dropGroup($event)">
    <div cdkDrag *ngFor="let group of dummyFormData.fieldGroups; let i = index" class="entity-form-cell admin-form-column section-container">
      <app-admin-section-header [(title)]="group.header" (remove)="removeGroup(i)"></app-admin-section-header>
      <div cdkDropList [cdkDropListData]="group.fields" (cdkDropListDropped)="drop($event)" class="fields-group-list drop-list">
        <div *ngFor="let field of group.fields" class="admin-form-field flex-row align-center" cdkDrag cdkDragBoundary=".overall-container">
          <div class="dummy-form-field"></div>
        </div>
      </div>
    </div>
    <div class="entity-form-cell admin-form-column">
      <div cdkDropList (cdkDropListDropped)="dropNewGroup($event)" class="fields-group-list drop-list drop-area-hint">
        drop here to create new field group
      </div>
    </div>
  </div>
  <mat-card class="toolbar">
    <mat-card-content cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="dummyFormData.availableFields" class="drop-list">
      <div class="drop-area-hint"></div>
    </mat-card-content>
  </mat-card>
</div>

My ts code -

  drop(event: CdkDragDrop<ColumnConfig[], ColumnConfig[]>) {
    console.log(this.config.fieldGroups)
    const prevFieldsArray = event.previousContainer.data;
    const newFieldsArray = event.container.data;

    if (
      prevFieldsArray[event.previousIndex] === this.createNewFieldPlaceholder
    ) {
      this.dropNewField(event);
      return;
    }

    if (event.previousContainer === event.container) {
      moveItemInArray(newFieldsArray, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(
        prevFieldsArray,
        newFieldsArray,
        event.previousIndex,
        event.currentIndex,
      );
    }

    if (newFieldsArray === this.availableFields) {
      // ensure available fields have consistent order
      this.initAvailableFields();
    }
  }
dropGroup(event: CdkDragDrop<any>) {
  moveItemInArray(
    dummyFormData.fieldGroups,
    event.previousIndex,
    event.currentIndex,
  );
}

dropNewGroup(event: CdkDragDrop<any, any>) {
  const newCol = { fields: [] };
  dummyFormData.fieldGroups.push(newCol);
  event.container.data = newCol.fields;
  dropGroup(event);
}

removeGroup(i: number) {
  const [removedFieldGroup] = dummyFormData.fieldGroups.splice(i, 1);
  // additional logic if needed
} 

Data Array:

const dummyFormData = {
  fieldGroups: [
    {
      fields: ['photo'],
      header: "Personal Information"
    },
    {
      fields: ['name', 'projectNumber', 'admissionDate'],
      header: "Additional"
    },
    {
      fields: ['dateOfBirth', 'birth_certificate', 'gender', 'motherTongue'],
      header: "Additional"
    },
    {
      fields: ['center', 'status', 'address', 'phone'],
      header: "Scholar activities"
    }
  ],
  availableFields: ['field1', 'field2', 'field3'], // Example available fields
  createNewFieldPlaceholder: 'createNewFieldPlaceholder' // Placeholder for creating new fields
};

Expected Outcome:

When dropping a form group, I expected the currentIndex to accurately represent the position where the form group was dropped within the list of form groups. However, despite correctly updating the previousIndex, the currentIndex consistently showed as 0, regardless of where I dropped the form group.