Tree.jsx

import {
  useTreeState,
  Tree,
  TreeItem,
  TreeGroup,
  TreeGroupLabel,
} from "ariakit/tree";

function TreeView() {
  const state = useTreeState({ defaultExpandedIds: ["item-1"] });
  return (
    <Tree state={state} aria-label="Items">
      <TreeItem id="item-1">
        <TreeGroupLabel>Item</TreeGroupLabel>
        <TreeGroup>
          <TreeItem>Item</TreeItem>
          <TreeItem>Item</TreeItem>
          <TreeItem>Item</TreeItem>
          <TreeItem>
            <TreeGroupLabel>Item</TreeGroupLabel>
            <TreeGroup>
              <TreeItem>Item</TreeItem>
              <TreeItem>Item</TreeItem>
              <TreeItem>Item</TreeItem>
            </TreeGroup>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
      <TreeItem>Item</TreeItem>
      <TreeItem>Item</TreeItem>
    </Tree>
  );
}