Unable to pass refs from RichTreeView to slot component

[ccennis]

I have been sawing at this for ages, and I cannot figure out what I am doing wrong. I want to drag and drop these items within my DragTreeItem component but I cannot seem to pass a non-null ref via slotProps.

const getItemRef = (itemId) => { if (!itemRefs.current[itemId]) { itemRefs.current[itemId] = React.createRef(); } return itemRefs.current[itemId]; };

return ( <> <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}> {treeData && treeData.length > 0 && ( <Box sx={{ borderBottom: '1px solid #ddd', paddingY: '10px', }}> <RichTreeView apiRef={apiRef} items={treeData} sx={{ width: '100%', height: 'fit-content', flexGrow: 1, overflowY: 'auto', }} slots={{ item: DragTreeItem }} slotProps={{ item: (itemProps) => ({ ...itemProps, ref: getItemRef(itemProps.itemId), handleCreateCollection, onItemDrop, disabled: false, }), }} /> </Box> )} </Box> </> );

I have attempted to pass the function, the ref itself, and even tried to get the DomElement from the apiRef.

`const DragTreeItem = React.forwardRef(function DragTreeItem(props, ref) {
const {
itemId,
label,
disabled = false,
children,
handleCreateCollection,
onItemDrop,
...other
} = props;

React.useEffect(() => {
if (ref && ref.current) {
console.log(DragTreeItem received DOM ref for ${itemId}:, ref.current);
} else {
console.warn(Ref is NULL for item ${itemId});
}
}, [ref, itemId]);
`

The logs always show that this ref is NULL and I cannot get my atlassian draggable variable to set. Is there a way to pass a ref correctly to a slotted component?