Rerender MUI tree with disabled treeItems - reactjs

Question

I have a MUI TreeView where its treeItems are rendered in a function.
The problem I have is that I want to toggle disable on every treeItem.
But when I try that, the items aren't disabled until I click somewhere.
You could see it in this sandbox
(When you use the toggle button it seems to work as I expect from the second click and forward, but using the other two you see the problem I have)
const Tree = (props: Props) => {
const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => {
setExpanded(nodeIds);
};
const renderTreeItems = (
node: MyNode,
nodeDisabled: boolean,
) => {
return (
<StyledTreeItemRoot
key={node.id}
nodeId={'' + node.id}
label={
<Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>
<Typography
variant='body2'
>
{node.title}
</Typography>
</Box>
}
disabled={nodeDisabled}
{...props.treeItemProps}
>
{Array.isArray(node.children)
? node.children.map((node) => renderTreeItems(node, nodeDisabled))
: null}
</StyledTreeItemRoot>
);
};
return (
<TreeView
expanded={expanded}
selected={props.selectedNodeId}
onNodeSelect={(_event: React.SyntheticEvent, nodeId: string) => {
props.onSelect(nodeId);
}}
onNodeToggle={handleToggle}
{...props.treeViewProps}
>
{props.tree.map((item) =>
renderTreeItems(item, props.treeDisabled ?? false),
)}
</TreeView>
);
};
export default Tree;

Answer 1

Solved this by adding a useEffect listening for the change of disable prop and calling a forceUpdate function like this:
const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void;
useEffect(() => {
forceUpdate();
}, [forceUpdate, props.treeDisabled]);
Edit:
Although the first solution worked, I changed to adding the prop, which tells the tree to be disabled or not, to the key prop in the tree.
<TreeView
key={String(props.treeDisabled)}
expanded={expanded}
selected={props.selectedNodeId}
onNodeSelect={(_event: React.SyntheticEvent, nodeId: string) => {
props.onSelect(nodeId);
}}
onNodeToggle={handleToggle}
{...props.treeViewProps}
>
{props.tree.map((item) =>
renderTreeItems(item, props.treeDisabled ?? false),
)}
</TreeView>