Material drag and drop registry fails

Question

When dragging from one list to the other often the event does not activate. Also often it does not recognise the other container as a droppable zone.

I tried putting the drag and drop on different elements, changing the css styling to hopefully get better detection. changing the general html structure.

I couldn't get it to work on stackblitz but here is it anyway to look into the code. https://stackblitz.com/edit/angular-glkn4v

general html for drag and drop lists

<div class="grouper" cdkDropList cdkDropListGroup id="list-one" [cdkDropListConnectedTo]="['list-two']" [cdkDropListData]="dataMap"
               (cdkDropListDropped)="drop($event)" >
            <div *ngFor="let node of getMapKeys(); let i = index">
              <div class="main" cdkDropList>
                <div class="headnode">> {{node}}</div>
                <div class="subnode" *ngFor="let item of getmapkeyValues(node)" cdkDrag> <!--style="display: none;"-->
                  {{item}}
                </div>
              </div>
            </div>
          </div>

I want the item to register it properly when its being dragged over a dropzone. It should also be droppable on each part of the tree like structure.

I'm very much a beginner in all this so sorry if all my code is bad.