[react-charting] How to run side-effects when hovering and selecting segments on a chart (ex, DonutChart?)

[fpintos]

Hello,

I have an application with two panels - one shows a particular set of data, another shows a chart about that data.
I would like to run some side-effects, like highlighting the respective data in the main panel when I hover or select a segment, and removing the highlight when the hover goes away.

I'm trying this with DonutChart and failing for a number of reasons.

For example, I've tried hooking up to the onRenderCalloutPerDataPoint and rendering a react component with useEffect, but alas, the callout is not dismounted, just hidden, so the dispose of useEffect does not get called and I can't tell when the callout becomes hidden. There is also click interactions that select/unselect the segments, and as consumer of the DonutChart we're not told which segment is selected (as far as I could tell). That changes how the callout is presented and again, makes it hard to run my side-effects to highlight the data that is selected in the chart.

Is there a different way of doing this that I'm not seeing, or we just need to add more properties & callbacks to DonutChart (and possibly others) in order to support scenarios like this?

Thanks