Добавь возможность скрывать и раскрывать узлы дерева. По умолчанию все открыты.

Храните состояние раскрытия каждого узла с начальным true и переключайте его кнопкой; дочерние узлы показывайте только в раскрытом состоянии.

Для React и дерева { id, label, children } с уникальными стабильными id:

function TreeNode({ node }) {
  const [open, setOpen] = useState(true);
  const children = node.children ?? [];
  return <li>
    {children.length ? <button type="button" aria-expanded={open}
      onClick={() => setOpen(value => !value)}>{node.label}</button> : node.label}
    {children.length > 0 && <ul hidden={!open}>
      {children.map(child => <TreeNode key={child.id} node={child} />)}
    </ul>}
  </li>;
}

useState импортируют из React. hidden сохраняет дочерние компоненты смонтированными, поэтому их прежнее состояние раскрытия не теряется; для очень большого дерева это дороже условного рендера.