Angular CDK Drag and Drop not working for nested drop areas

Question

I use angular CDK drag and drop to create a form builder its work fine with nested areas but its not working in nested list a have mention some code snippets below

<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 file

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],
            },
          ],
        });
      }
    }
  }

The form builder is work fine for single columns but when i try to add columns and use the nested column it is not working enter image description here