title: React MUI TreeView key navigation broken when using a Branch component
body: <p>When I do the following I can navigate with my arrow keys through the tree and the tree gets focus when I tab through the document (only root items, sub branches are broken because they use Branch):</p>
  <pre><code>const Item = React.memo(function Item({ item }) {
    const { onChange } = useContext(DataContext);
    return (
      &lt;TreeItem
        key={item.key}
        nodeId={item.key}
        label={item.name}
      &gt;
        {Boolean(item?.children) &amp;&amp; (
          &lt;Branch data={item.children} /&gt;
        )}
      &lt;/TreeItem&gt;
    );
  });
  
  
  
  &lt;TreeView multiSelect selected={NONE}&gt;
    {data
      .map((item) =&gt; (
        &lt;Item
          key={item.key}
          item={item}
          nodeId={item.key}
        /&gt;
      ))}
  &lt;/TreeView&gt;
  </code></pre>
  <p>But when I do the following the tree doesn't get focussed when tabbing through the document and arrow up and down don't navigate through the tree (only left and right after clicking on an item in the tree):</p>
  <pre><code>&lt;TreeView multiSelect selected={NONE}&gt;
    &lt;Branch data={data} /&gt;
  &lt;/TreeView&gt;
  </code></pre>
  <p>I think it has something to do with <a href="https://material-ui.com/guides/composition/#caveat-with-refs" rel="nofollow noreferrer">not forwarding a ref</a> I tried with class components (React.PureComponent) but no change. I think a direct child of <code>TreeItem</code> or <code>TreeView</code> needs to have a nodeId prop but what will that be for a set of nodes?</p>
  <p>One <a href="https://material-ui.com/components/tree-view/#gmail-clone" rel="nofollow noreferrer">example</a> shows this working but I can't pass nodeId to the Branch as it receives multiple ones. <a href="https://material-ui.com/components/tree-view/#rich-object" rel="nofollow noreferrer">Another example</a> shows using a renderTree function but my items have a checkbox and checking one item causes the whole tree to re paint.</p>
  <p>If I need to forward a ref then what is it, no examples of this are given?</p>
  <p><strong>update</strong></p>
  <p>I got a little further and noticed it is (not) passing <code>nodeId</code> that will break it:</p>
  <pre><code>const Item = React.memo(function Item({ parent }) {
    const { map } = useContext(DataContext);
    const parentItem = map.get(parent);
    const children = !parentItem?.children
      ? null
      : parentItem.children.map((key) =&gt; (
          &lt;Item key={key} parent={key} nodeId={key} /&gt;
        ));
    //this will not render root but crashes when Tree passes
    //  a nodeId
    if (!parentItem.parent) {
      return children;
    }
    return (
      &lt;TreeItem
        key={parentItem.key}
        nodeId={parentItem.key}
        label={parentItem.name || &quot;root&quot;}
      &gt;
        {children}
      &lt;/TreeItem&gt;
    );
  });
  const Tree = React.memo(function Tree({ parent }) {
    return (
      &lt;TreeView
        multiSelect
        selected={NONE}
        defaultCollapseIcon={&lt;ExpandMoreIcon /&gt;}
        defaultExpandIcon={&lt;ChevronRightIcon /&gt;}
      &gt;
        {/* if item does not render parent and I pass nodeId
          it will crash if no nodeId is passed then key
          navigation is broken again */}
        &lt;Item parent={parent} nodeId={parent} /&gt;
      &lt;/TreeView&gt;
    );
  });
  </code></pre>
  <p>If I pass nodeId but not render root the error is:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'children' of undefined
  at buildVisible (TreeView.js:590)</p>
  </blockquote>
  <blockquote>
  <p>The above error occurred in the &lt;ForwardRef(TreeView)&gt; component:</p>
  </blockquote>
  <p>Passing nodeId and rendering root will work but root is a dummy to make recursion easier so I don't want to render it.</p>