useTree

import { useTree, useTreeNode } from '@primereact/headless/tree';

const tree = useTree({ value: nodes, selectionMode: 'single' });
const { rootProps } = tree;
 
const treeNode = useTreeNode({ node: nodes[0], context: tree, index: 0 });
const { state, nodeProps, contentProps } = treeNode;
const toggleProps = tree.getToggleProps(nodes[0]);

const [expandedKeys, setExpandedKeys] = React.useState<TreeExpandedKeys>({ '0': true });
 
const tree = useTree({
    value: nodes,
    expandedKeys,
    onExpandedChange: (e) => setExpandedKeys(e.value)
});
 
<div {...rootProps}>
    <ul {...tree.getListProps(false)}>
        <li {...nodeProps}>
            <div {...contentProps}>
                <button {...toggleProps}></button>
            </div>
        </li>
    </ul>
</div>;

const [selectionKeys, setSelectionKeys] = React.useState({});
 
const tree = useTree({
    value: nodes,
    selectionMode: 'checkbox',
    selectionKeys,
    onSelectionChange: (e) => setSelectionKeys(e.value)
});

const tree = useTree({
    value: nodes,
    draggableNodes: true,
    droppableNodes: true,
    draggableScope: 'tasks',
    droppableScope: 'tasks',
    onValueChange: (e) => setNodes(e.value)
});

<input {...tree.filterProps} placeholder="Search" />

function TreeNodeItem({ node, index }) {
    const { state, nodeProps, contentProps } = useTreeNode({ node, context: tree, index });
 
    return (
        <li {...nodeProps}>
            <div {...contentProps}>{node.label}</div>
            {state.expanded && node.children && (
                <ul {...tree.getListProps(true)}>
                    {node.children.map((child, i) => (
                        <TreeNodeItem key={child.key} node={child} index={i} />
                    ))}
                </ul>
            )}
        </li>
    );
}

[data-scope='tree'][data-part='content'] {
    padding: 0.25rem 0.5rem;
}
 
[data-scope='tree'][data-part='content'][data-selected] {
    background-color: rgba(var(--primary-rgb), 0.1);
}
 
[data-scope='tree'][data-part='content'][data-expanded] {
    font-weight: 600;
}
 
[data-scope='tree'][data-part='node'][data-node-key='0'] {
    font-weight: bold;
}