Higlight hovered element in TreeMap chart

[jablonskipj]

I would like to achieve a functionality where the element that I have a mouse on in the TreeMap chart changes color to indicate that we are pointing at it. I have dug through the documentation and found nothing useful. The only thing that unfortunately is not working as I expect was to implement the events onLeafMouseOver and onLeafMouseOut. My implementation looks like this:

onLeafMouseOver = (leaf, event) => {
  leaf.data.color = leaf.data.color === Color.red ? Color.higlightRed : Color.higlightGrey
}

onLeafMouseOut = (leaf, event) => {
  leaf.data.color = leaf.data.color === Color.higlightRed ? Color.red : Color.grey
}

this work only for couple elements and suddenly it stops executing the event. Is there any other way to achieve the highlight on hovered element effect?

[mcnuttandrew]

I would probably take an approach where my Treemap was contained within a stateful component, which kept track of which node was to be highlighted. I'd then mark each of my nodes (during data preparation) with a unique id. Then on mouseOver i'd set state of hovered id to be that nodes unique id. Finally, i'd provide a getColor function to Treemap that did something like leaf => leaf.id === this.state.highlightedLeaf ? Color.red : Color.gray

[sumismyname]

I have followed the exact same approach suggested by @mcnuttandrew but some of the onLeafMouseOver/onLeafMouseOut events were not triggered, especially with rapid mouse movements. Looks like a racing condition as a result of onLeafMouseOver/Out events changing the state, resulting in a reconstruction of the treemap. Any suggestions on how to solve it will be appreciated!