Angular CDK drag and drop multiple nested cdkDropList not working

Question

I have been working on a form builder using Angular CDK drag and drop, and I'm facing an issue with nested drag areas. I have successfully implemented drag and drop functionality without nested lists, but now I'm trying to create multiple drag areas within columns for a nested list structure. Unfortunately, the nested drag areas are not functioning as expected.

<ul
  cdkDropList
  #todoList="cdkDropList"
  [cdkDropListData]="inputSection"
  [cdkDropListConnectedTo]="doneList"
  class="navbar-nav justify-content-end flex-grow-1 input-sideBar"
>
  <li *ngFor="let item of inputSection" cdkDrag class="nav-item">
    <a href="javascript:void(0)">
      <div class="img-box">
        <img src="{{ item.icon }}" alt="textbox" class="img-fluid" />
      </div>
      {{ item.text }}
      <p *cdkDragPreview>{{ item.text }}</p>
    </a>
    <a href="javascript:void(0)" *cdkDragPreview>
      <div class="img-box">
        <img src="{{ item.icon }}" alt="textbox" class="img-fluid" />
      </div>
      {{ item.text }}
    </a>
  </li>
</ul>

<div
  class="login_contant"
  cdkDropList
  #doneList="cdkDropList"
  [cdkDropListData]="myFormArry"
  [cdkDropListConnectedTo]="todoList"
  (cdkDropListDropped)="drop($event, false)"
>
  <div
    *ngFor="let item of myFormArry.rows; let idx = index"
    class="row"
    cdkDrag
  >
    <ng-container *ngFor="let column of item.columns; let id = index">
      <div
        class="{{ column.size }}"
        *ngIf="column.isColumn === false; else elseBlock"
      >
        <ng-container
          *ngFor="let element of column.elements; let idVal = index"
        >
          // input components
        </ng-container>
      </div>
      <ng-template #elseBlock>
        <div
          class="{{ column.size }}"
          cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="myFormArry"
          [cdkDropListConnectedTo]="todoList"
          (cdkDropListDropped)="drop1($event, true)"
        >
          <div class="column-box" cdkDrag>
            <ng-container
              *ngFor="let element of column.elements; let idVal = index"
            >
              // input components
            </ng-container>
          </div>
        </div>
      </ng-template>
    </ng-container>
  </div>
</div>

form-builder.component.ts

export class FormBuilderComponent implements AfterViewInit {
  selectedOption: string = "";
  dragPreview: HTMLElement;
  @ViewChild(CdkDropList) dropList?: CdkDropList;

  constructor(
    private formBuilderService: FormBuilderService,
    public dragDropService: DragDropService
  ) {}

  inputSection: any = inputSection;

  headingSection = headingSection;

  fontWeightArr = fontWeightArr;

  draggedItem: any = null;

  myFormArry: any = {
    name: "",
    description: "",
    rows: [],
  };

  get dropListConnectedTo(): CdkDropList<any>[] {
    return this.dragDropService.getDropListConnectedToList();
  }

  trackById(index: number, item: formBuilderList) {
    return item.id;
  }
  ngAfterViewInit(): void {
    if (this.dropList) {
      this.dragDropService.register(this.dropList);
    }
  }
  drop(event: CdkDragDrop<string[]>, isColumn): void {
    this.formBuilderService.drop(
      event,
      event.previousContainer.data,
      event.container.data
    );
  }

  drop1(event: CdkDragDrop<string[]>, isColumn): void {
    console.log("nested done list");
    this.formBuilderService.drop(
      event,
      event.previousContainer.data,
      event.container.data
    );
  }
}

Drop function

drop(
    event: CdkDragDrop<string[]>,
    previousContainerData: any,
    containerData: any
  ): void {
    if (event.previousContainer === event.container) {
      moveItemInArray(containerData, event.previousIndex, event.currentIndex);
    } else {
      const droppedItem: any = previousContainerData[event.previousIndex];
      if (droppedItem.type == "column") {
        containerData["rows"].push({
          columns: [
            {
              uid: uuidv4(),
              size: "col-md-6",
              isColumn: true,
              elements: [],
            },
            {
              uid: uuidv4(),
              size: "col-md-6",
              isColumn: true,
              elements: [],
            },
          ],
        });
      } else {
        containerData["rows"].push({
          columns: [
            {
              uid: uuidv4(),
              size: "col-md-12",
              isColumn: false,
              elements: [droppedItem],
            },
          ],
        });
      }
    }
  }

I would greatly appreciate it if anyone from the community could take a look at my issue and provide some guidance or insights on how to resolve it. and also I have attached the gif screenshot of my issue Your expertise and assistance would be invaluable to me.

Thank you so much for your time and support. Looking forward to hearing from you. please checkout image