I have implemented basic drag and drop functionality from component 1 to component 2. Dragging and event firing works just fine. When I drag item from Component 1 to Component 2 some item (div from component 1) is added as a child of my button in component 2. I don’t want that and how can I prevent it with other stuff working as it is?

Component 1:
<div cdkDropList [cdkDropListConnectedTo]="['tool-table-drag1']" id="draggable-list">
    <div class="container" *ngFor="let item of items" cdkDrag>
      <div class="item-container" cdkDrag>{{ item.name }}, - {{item.toolTypeName}}</div>
    </div>
</div>

Component 2 (.html):
    <button cdkDropList [cdkDropListConnectedTo]="'draggable-list'" id="tool-table-drag1" 
                            (cdkDropListDropped)="drop($event, tools[i])">
    <p>T01</p>
</button>
Component 2 (.ts):
    drop(event: CdkDragDrop<Tool[]>, button: string) {
    console.log(button);
    if (event.isPointerOverContainer) {
      const droppedTool = event.item.data as Tool;
      this.toolDropped.emit({ tool: droppedTool, button });
    }
  }

Here I am dragging whats in black. I want to prevent adding this white text while dragging, so only T01 remains.

I’ve tried using OnDropListEnterPredicate and return false, but then drop doesnt work. <br<br
I’ve tried using

(cdkDropListEntered)="dragEnter($event)"

with

dragEnter(enter: CdkDragEnter<Tool>){
    console.log(enter);
    enter.container.removeItem(enter.item);
  }