PieChart from DevExtreme blinks when retenders while using useState?

Question

I am using PieChart from devExtreme React and I want to know if the user is hovering on any of the chart slices and on which one.

The reason is that I created a custom legend for the chart and I want to highlight the item from the legend that corallites with the chart slice that is being hovered.

Looking through the devExtreme documentation, I found the onPointHoverChanged prop. This prop allows me to receive data for each slice of the chart when the user hovers over them and to highlight the corresponding legend item. I thought that I could send a state to the legend component with the data from the hovered slice, and update this state every time a new slice is hovered.

The issue is that every time the user hovers on a slice the state changes thus the chart rerendering. But the rerender is visible... The chart disappears for a second and appears again and it doesn't feel very good....

So far I tried multiple things by now like using useMemo , useCallback , and tried sending the data to the legend component without using state but I can't make it work.

Is there a way I could prevent the chart from rerender?

  const [hover, setHover] = useState('');

  const onPointHoverChanged = ({ target }: any) => {
    if (target.isHovered()) {
      setHover(target.data.allocation);
    } else {
      setHover('');
    }
  };

<PieChart
          id='pie-chart'
          dataSource={chartData}
          palette={chartData.map((item) => item.color)}
          type='doughnut'
          resolveLabelOverlapping='shift'
          sizeGroup='piesGroup'
          innerRadius={0.65}
          centerRender={CenterTemplate}
          onPointHoverChanged={onPointHoverChanged}
          animation={false}
          startAngle={90}
          className={styles.chart}
        >
          <Title text={title} font={{ color: 'white', weight: 600 }}>
            <Subtitle text={subTitle} font={{ color: 'white' }} />
          </Title>
          <Series argumentField={argumentField} valueField={valueField}>
            <Label
              visible={true}
              format='fixedPoint'
              customizeText={(e) => customizeText(e)}
              backgroundColor='none'
            >
              <Font size={16} weight={600} />
            </Label>
          </Series>
          <Legend visible={false}></Legend>
        </PieChart>

<PieChartLegend data={chartData} hoveredSlice={hover} />