angular cdk dnd with angular tree component package

Question

I am trying to use angular cdk dnd with angular tree component package. currently i am using ng2-dnd. ng2-dnd code

<div class="tree">
    <tree-root
      #tree
      id="tree2"
      [focused]="true"
      [nodes]="nodes"
      [options]="options"
    >
      <ng-template
        #treeNodeFullTemplate
        let-node
        let-index="index"
        let-templates="templates"
      >
        <div
          dnd-sortable-container 
          [sortableData]="dropDataInComponent"
          [dropZones]="['level-2-' + index]"
        >
          <div 
              dnd-sortable 
              [sortableIndex]="index"
              (dragstart)="onDragStart(node.data)"
              [dragEnabled]="node.data.level == 2" 
              (dragend)="onDragEnd(nodes)" 
              style="display: flex; gap: 4px; padding: 6px" class="mg-15"">
            <tree-node-expander
              class="tree-node-expander-arrow"
              [node]="node"
            ></tree-node-expander>
          </div>
          <tree-node-children
            [node]="node"
            [templates]="templates"
          ></tree-node-children>
        </div>
      </ng-template>
    </tree-root>
  </div>

its bugging out someout its not dragging what might be the problem? can anyone help me with replacing ng2-dnd witn cdk dnd

<div class="tree">
    <tree-root
      #tree
      id="tree2"
      [focused]="true"
      [nodes]="nodes"
      [options]="options"
    >
      <ng-template
        #treeNodeFullTemplate
        let-node
        let-index="index"
        let-templates="templates"
      >
        <div
          cdkDropList
          [cdkDropListData]="node"
          (cdkDropListDropped)="drop($event, node)"
        >
          <div 
              cdkDrag
              [cdkDragData]="node.substructures"
              style="display: flex; gap: 4px; padding: 6px" class="mg-15">
            <tree-node-expander
              class="tree-node-expander-arrow"
              [node]="node"
            ></tree-node-expander>
          </div>
          <tree-node-children
            [node]="node"
            [templates]="templates"
          ></tree-node-children>
        </div>
      </ng-template>
    </tree-root>
  </div>

this was my replacement but not working also putting the data that was there in ng2-dnd is also not working