Drag and Drop Tree within another tree

[ravindra-wts]

Description:
Hello, I am trying to implement a feature where I can make a complete tree dragable into another tree. However, I am facing issues in getting the targetType, betweenItem, and Root when I drop the tree into the target tree.

Steps to Reproduce:
Create two tree structures with multiple nodes.
Make the first tree dragable.
Try to drag the first tree and drop it into the second tree.
Expected Result:
When I drop the first tree into the second tree, I expect to get the targetType, betweenItem, and Root of the second tree so that I can render the new resultant tree accordingly.

Actual Result:
However, I am unable to get the targetType, betweenItem, and Root of the second tree, which makes it difficult for me to render the new resultant tree.

Example Resultant Tree:
Here's an example of how I would like the new resultant tree to look like:

tree
|_ Item1
|_ Item2
|_Dragged Tree
|__dragged item 1
|__dragged item 2
|__dragged item 3
|_Item3
|_Item4
|_Item5

Code

import { useState, useEffect } from "react";
import {
  UncontrolledTreeEnvironment,
  Tree,
  StaticTreeDataProvider,
} from "react-complex-tree";
import { longTree } from "./data";
import "react-complex-tree/lib/style-modern.css";

export default function App() {
  const [treeData, setTreeData] = useState(longTree.items);
  const [draggedItem, setDraggedItem] = useState(null);
  const [sourceTreeId, setSourceTreeId] = useState(null);
const handleDrop = (e, targetTreeId) => {
    console.log("target treeid e", targetTreeId, draggedItem, sourceTreeId, e);
    console.log("target id", e.target.targetType);
    // if (draggedItem && sourceTreeId !== targetTreeId) {
    //   // Move the dragged item from the source tree to the target tree
    //   const updatedTreeData = { ...treeData };
    //   // Implement logic to update the tree structure
    //   // Example: Remove item from the source tree and add it to the target tree
    //   setTreeData(updatedTreeData);
    // }
  };

  const handleDragStart = (e, item, sourceTreeId) => {
    console.log("drag start", e);
    setDraggedItem(item);
    setSourceTreeId(sourceTreeId);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    console.log("e target hover", e);
    // Implement logic to handle drag over event
  };

  return (
    <UncontrolledTreeEnvironment
      canDragAndDrop={true}
      canDropOnFolder={true}
      canReorderItems={true}
      dataProvider={
        new StaticTreeDataProvider(longTree.items, (item, data) => ({
          ...item,
          data,
        }))
      }
      getItemTitle={(item) => item.data}
      viewState={{}}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-evenly",
          alignItems: "baseline",
          padding: "20px 0",
          flexDirection: "column",
        }}
      >
        <div
          draggable="true"
          // onDragStart={(e) => handleDragStart(e, "Fruit")}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          style={{
            width: "28%",
            marginTop: "10px",
            backgroundColor: "white",
            order: 0,
          }}
      >
          <span
            draggable="true"
            onDragStart={(e) => handleDragStart(e, "Fruit")}
          >
            ||
          </span>
          <Tree treeId="tree-4" rootItem="Fruit" treeLabel="Tree 1" />
        </div>
        <div
          draggable="true"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          style={{
            width: "28%",
            marginTop: "10px",
            backgroundColor: "white",
            order: 1,
          }}
        >
          <span
            draggable="true"
            onDragStart={(e) => handleDragStart(e, "Meals")}
          >
            ||
          </span>
          <Tree treeId="tree-5" rootItem="Meals" treeLabel="Tree 2" />
        </div>
        <div
          draggable="true"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          style={{
            width: "28%",
            marginTop: "10px",
            backgroundColor: "white",
            order: 2,
          }}
        >
          <span
            draggable="true"
            onDragStart={(e) => {
              handleDragStart(e, "Drinks");
            }}
          >
            ||
          </span>
          <Tree treeId="tree-6" rootItem="Drinks" treeLabel="Tree 3" />
        </div>
        <div
          draggable="true"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          style={{
            width: "28%",
            marginTop: "10px",
            backgroundColor: "white",
            order: 3,
          }}
        >
          <span
            draggable="true"
            onDragStart={(e) => handleDragStart(e, "Desserts")}
          >
            ||
          </span>
          <Tree treeId="tree-7" rootItem="Desserts" treeLabel="Tree 4" />
        </div>
      </div>
    </UncontrolledTreeEnvironment>
  );
}

What thing I am doing wrong, suggest me any other way to achieve similar functionality