I'm using TreeView, TreeItem of material ui. I'm trying to style conditionally each node (selected, hover, focus). actually what I'm trying to do is that only node that not disabledButton (props that come from outside) will be in right color. only node that selectable will be in active color (expand node not means that node is selectable). something like this example

I did this example, but the behavior is really weird, sometimes the "child-4" looks like the style of disabledButton even I sent the right props, maybe because it nested props, sometimes the other nested not get the right colors of the hover, focus and selected.. link for example (with colors) example with different colors

I want it to be in real colors also with the theme (active should be like blue color, hover gray) so I created this example. example with theme colors sometimes it works as expected and sometimes is not. I looked in this issue but it's not like my example but there it uses in classes but I don't want to send this way