Donut chart data not updating on hover

Question

When I select the legend in a donut chart, it focuses and updates the corresponding arc and value to the selected legend data as expected. However, when I hover over the selected arc itself, it renders the initial InsideDonut value.

Here's the code in which I'm computing the donut value inside the donut callback function:

  const _valueInsideDonut = React.useCallback(
    (valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) => {
      const highlightedLegend = _getHighlightedLegend();
      if (valueInsideDonut !== undefined && highlightedLegend !== '' && !showHover) {
        let legendValue = valueInsideDonut;
        data!.map((point: IChartDataPoint, index: number) => {
          if (point.legend === highlightedLegend) {
            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;
          }
          return;
        });
        return legendValue;
      } else {
        return valueInsideDonut;
      }
    },
    [_getHighlightedLegend, showHover],
  );

How can I render the arc with the updated state on hover?