Drag and Drop should be handled within the level hierarchy

[GVSSri]

import { Tree } from "react-arborist";
import { data } from "./data";

function Node({ node, style, dragHandle }) {
/* This node instance can do many things. See the API reference. */
return (
<div style={style} ref={dragHandle} onClick={() => node.toggle()}>
{node.isLeaf ? "🍁" : "🗀"} {node.data.name}

);
}

/* Customize Appearance /
export default function App() {
return (
<Tree
initialData={data}
openByDefault={false}
width={600}
height={1000}
indent={24}
rowHeight={36}
paddingTop={30}
paddingBottom={10}
padding={25 / sets both */}
>
{Node}

);
}

export const data = [
{ id: "1", name: "Unread" },
{ id: "2", name: "Threads" },
{
id: "3",
name: "Chat Rooms",
children: [
{ id: "c1", name: "General" },
{ id: "c2", name: "Random" },
{ id: "c3", name: "Open Source Projects" }
]
},
{
id: "4",
name: "Direct Messages",
children: [
{ id: "d1", name: "Alice" },
{ id: "d2", name: "Bob" },
{ id: "d3", name: "Charlie" }
]
}
];

Example: Chat Rooms and Direct Messages are parent I need drag within the level same for child also. Appreciate your help. Thanks