title: How to use Material UI TreeView with Recursive TreeItem Component with added state
body: <p>I'm using Material UI's <code>TreeView</code> and <code>TreeItem</code> Component. I want to add extra state that will be unique to each treeItem to manage drag and drop with react-dnd.</p>
  <p>The default way Material UI says to do this is like this:</p>
  <pre><code>const renderTree = (nodes) =&gt; (
      &lt;TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} ref={drag}&gt;
        {Array.isArray(nodes.children) ? nodes.children.map((node) =&gt; renderTree(node)) : null}
      &lt;/TreeItem&gt;
    );
  
    return (
      &lt;TreeView
        className={classes.root}
        defaultCollapseIcon={&lt;ExpandMoreIcon /&gt;}
        defaultExpanded={['root']}
        defaultExpandIcon={&lt;ChevronRightIcon /&gt;}
      &gt;
        {renderTree(data)}
      &lt;/TreeView&gt;
    );
  </code></pre>
  <p>But because I need to have individual unique state for each tree item this won't work <strong>(For some reason only the last TreeItem rendered has the drag functionality and I'm assuming it will work if each one had it's own variable).</strong> To get around this I created a component called TreeItemWrapper that looks like this</p>
  <pre><code>export default function TreeItemWrapper(props) {
      const [{isDragging}, drag] = useDrag({
          item:  {
              type: ItemTypes.ROW,
          },
          collect: monitor =&gt; ({
              isDragging: !!monitor.isDragging(),
          })
      });
  
  
      return (
          &lt;TreeItem
              key={props.id}
              nodeId={props.id}
              label={props.label}
              ref={drag}
              opacity={isDragging ? '0.5' : '1'}
          &gt;
          &lt;/TreeItem&gt;
      )
  }
  </code></pre>
  <p>My renderTree method now looks like this</p>
  <pre><code>return (
              &lt;TreeItemWrapper id={nodes.id} label={nodes.label}&gt;
                  {Array.isArray(nodes.children) ? nodes.children.map( (node) =&gt; renderTree(node)) : null}
              &lt;/TreeItemWrapper&gt;
          );
  </code></pre>
  <p>Which isn't working. It's only rendering the top node of the tree. I wonder if I'm missing something simple about how react works? I put some log statements in <code>TreeItemWrapper</code> and they only get called once for the top node of the tree</p>