Angular - drag and drop from multiple containers doesn't work if one is a parent of another

Question

I have a planner style of application, which has 2 columns. Both have multiple expansion panels and I can drag and drop from the left one to the right one. The catch is I want drag and drop to work on items inside expansion panel as well as whole expansion panel as well. I've written a simplified application, which does pretty much the same, I can drag from the list of Classes and drop in Groups, as well as I can drag an entire Class (expansion panel). It looks since I have cdkDropList directive both in div that contains expansion panel (parent div) and also inside divs in the expansion panel (child div), it works only for topmost div. I can drag both items inside expansion panel and panel itself, but for some reason destination panel will accept drops only from top most element. So if I remove cdkDropList from expansion panel div, then it will start accepting elements inside the panel for dropping.

The application can be found here: https://stackblitz.com/edit/angular-drop-lists-in-accordion-awgvtj?file=src/app/app.component.html

To reproduce the problem start dragging any element from Class 1 to any Group, it will not be accepted to drop. Start dragging entire Class 1 and it will be dropped into Group. Now remove cdkDropList directive and cdkDropListData bind at line 36

    <div
      style="display:block; width: 770px"
      *ngFor="let class of classes; index as i"
      cdkDropList
      [cdkDropListData]="classNames"
    >

and all of the sudden elements from Class 1 panel will be accepted into the Groups.