MUI tree view with React-dnd

Question

I have a material ui v4 treeview that is working fine with react-dnd using the code below.

When I upgrade to mui v5 treeview, the drag does not work anymore, the item is no longer draggable.

I had a look between the 2 TreeItem implementation but there is a lot of change and I am lost.

https://github.com/mui-org/material-ui/blob/v4.x/packages/material-ui-lab/src/TreeItem/TreeItem.js

https://github.com/mui-org/material-ui/blob/master/packages/mui-lab/src/TreeItem/TreeItem.js

What am I missing? Many thanks for your answers :)

//recursive function to generate TreeItem tree with Drag embedded
function Box({ treeItem }) {
  const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: "TREEVIEW",
    item: !treeItem.children.length //if the resource has no child
      ? treeItem.data // we provide only the resource data
      : [
          treeItem.data,
          ...flatten(extractChildren(treeItem), extractChildren).map(
            //other wise we provide resource + child resources
            (x) => delete x.children && x
          ),
        ],
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <>
      <DragPreviewImage connect={preview} src={knightImage} />
      <TreeItem
        nodeId={treeItem.data.TreeID}
        label={treeItem.data.TreeName}
        ref={drag}
        style={{ isDragging }}
      >
        {treeItem.children &&
          treeItem.children.map((treeItem) => <Box treeItem={treeItem} />)}
      </TreeItem>
    </>
  );
}

const renderedListItems = tree.map((treeItem) => (
  <Box treeItem={treeItem} />
));

Answer 1

Probably, this happens because of the selection of the tree item. Even though disableSelection<\/code> is set as true in TreeView<\/code> , somehow the clicked child is being focused through aria-activedescendant<\/code> property at the root level.