I am trying to make several nested drag and drop lists

I have questions that go into sections, which in turn go into modules, until now I was able to drag the modules and sections together correctly, but the questions do not fit into the sections , (But if I remove the dragging behavior of modules/sections the questions move correctly), i have tried several solutions i found here, but nothing seems to work
Code

 <div cdkDropListGroup>
    <div class="example-container" cdkDropList [cdkDropListData]="filteredQuestions" (cdkDropListDropped)="drop($event)">
      <h2>Preguntas</h2>
      <div  class="example-list"  id="questions">
        <div class="example-box" *ngFor="let item of filteredQuestions" cdkDrag>{{ item.Pregunta }}</div>
      </div>
    </div>
  
    <div class="example-container">
      <h2>Ficha Generada</h2>
      <div cdkDropList [cdkDropListData]="generatedCards" (cdkDropListDropped)="dropGeneratedCards($event)">
        <mat-accordion *ngFor="let card of generatedCards" cdkDrag [cdkDragData]="card">
          <div>
            <span>{{ card.Modulo }}</span>
          </div>
          <div cdkDropList [cdkDropListData]="card.Sections" (cdkDropListDropped)="dropSections($event)">
            <div *ngFor="let section of card.Sections">
              <mat-expansion-panel hideToggle cdkDrag [cdkDragData]="section">
                <mat-expansion-panel-header class="disable_ripple">
                  <mat-panel-title>
                    {{ section.Section }}
                  </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="card mb-3 mt-3">
                  <div cdkDropList [cdkDropListData]="section.ListPreguntas" class="example-list" (cdkDropListDropped)="drop($event)">
                    <div
                      class="example-box {{ selectedCodSeccionModulo !== section.CodSeccionModulo ? 'bg-gray-400 opacity-75' : 'bg-white' }}"
                      *ngFor="let item of section.ListPreguntas" cdkDrag [cdkDragDisabled]="selectedCodSeccionModulo !== section.CodSeccionModulo">
                      {{ item.Pregunta }}
                    </div>
                  </div>
                </div>
              </mat-expansion-panel>
            </div>
          </div>
        </mat-accordion>
      </div>
    </div>
  </div>

drop(event: CdkDragDrop<any[]>) {
    const isSameContainer = event.previousContainer === event.container;
    const isSameCodSeccionModulo = event.container.data.every((item: any) =>
      item.CodSeccionModulo === this.selectedCodSeccionModulo
    );
  
    if (isSameContainer) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      if (isSameCodSeccionModulo) {
        transferArrayItem(
          event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex
        );
      } else {
        console.log('El CodSeccionModulo no coincide, no se puede mover el ítem');
      }
    }
  }
  
  dropGeneratedCards(event: CdkDragDrop<any[]>) {
    moveItemInArray(this.generatedCards, event.previousIndex, event.currentIndex);
  }
  
  dropSections(event: CdkDragDrop<any[]>) {
    const card = this.generatedCards.find(card => card.Sections.includes(event.item.data));
    if (card) {
      moveItemInArray(card.Sections, event.previousIndex, event.currentIndex);
    }
  }`