import { useState } from "react";
import { SortableTree, TreeItems } from "dnd-kit-tree";

type Data = {
  label: string;
};

const MyComponent = () => {
  const [value, setValue] = useState<TreeItems<Data>>([
    {
      id: "id-1",
      data: { label: "Item 1" },
      children: [
        {
          id: "id-2",
          data: { label: "Item 2" },
          children: [
            {
              id: "id-3",
              children: [],
              data: { label: "Item 3" },
            },
          ],
        },
      ],
    },
    {
      id: "id-4",
      children: [],
      data: { label: "Item 4" },
    },
    {
      id: "id-5",
      children: [],
      data: { label: "Item 5" },
    },
  ]);

  return (
    <SortableTree
      removable
      collapsible
      value={value}
      onChange={setValue}
      indentationWidth={25}
      renderItemContent={(item) => <div>{item.data?.label}</div>}
    />
  );
};