Toggleable and hand onSelect with custom node.

content_tree.tsx

import {TargetedElement} from "./types.ts";
import {FC} from "react";

import {Tree, NodeRendererProps} from "react-arborist";

type setElementsType = (elements: TargetedElement[]) => void;

interface ContentTreeProps {
    elements: TargetedElement[],
    setElements: setElementsType
};

const Node:FC<NodeRendererProps<TargetedElement>> = ({ node, style, dragHandle }) => {
  /* This node instance can do many things. See the API reference. */
  return (
    <div style={style} ref={dragHandle}>
      {node.data.targetType === "chapter" ? "🗀" : "🗎"}
      {node.data.name}
    </div>
  );
}

export const ContentTree:FC<ContentTreeProps> = ({elements, setElements}) => {

    return (
        <Tree
            data={elements}
            disableMultiSelection={true}
            onSelect={(nodes)=>{
                console.log(nodes)
                const node = nodes[0];
                node.toggle();
            }}
        >
            {Node}
        </Tree>

    );
}