Removing a dragged element's preview from the previous container

Question

I have somewhat of a nested code like this:

<tbody cdkDropList>
 <ng-container *ngFor="let element of formArray.controls; let i = index">
  <tr>
   <td cdkDrag></td>
   <td>
    <div cdkDropList [id]="'child-row-' + i" [cdkDropListConnectedTo]="<connecting with ids string array>">
     <ng-container *ngFor="let element of childFormArray.controls; let j = index">
      <div cdkDrag></div>
     <ng-container>
    </div>
   </td>
  </tr>
 </ng-container>
</tbody>

I am trying to drag the second cdkDrag inside child cdkDropList into another row's child cdkDropList.

The issue I'm having is that the dragged element is not detaching itself from the parent source container, even after I have dragged it outside the source container's bound and hovering over the target drop list container.

On doing dragging it multiple times forcefully, moving the dragged element around, only then it gets detached and allows me to drop it over the target dropList container.

What could be the reason for this issue?