Javascript Chart.js在悬停时闪烁

我已经阅读了一个类似问题的多个答案，并尝试了所有方法，但似乎没有任何效果。当我更新Chartjs条形图上的数据并将鼠标悬停在该图上时，它会在新旧数据之间不断闪烁

下面是我的图形组件：

import React, { useRef, useEffect, useCallback, useState } from 'react';
import Chart from 'chart.js';


const BarChart = (props: BarChartProps, ref): JSX.Element => {
  const { xAxisLabels, yAxisValues, barSettings, hideLegend } = props;
  const barChartRef = useRef<HTMLCanvasElement>(null);
  let myBarChart;

  const buildChart = () => {
    const myBarChartRef = barChartRef.current.getContext("2d");
    if(myBarChart) {
      myBarChart.destroy();
    }
    myBarChart = new Chart(myBarChartRef, {
      type: 'bar',
      data: {...},
      options: {...}
    });
  }

  useEffect(() => {
    buildChart();
  }, [buildChart]);

  return (
    <div style={{width: barSettings.width}}>
      <canvas ref={barChartRef} />
    </div>
  )
}

export default BarChart;

import React，{useRef，useffect，useCallback，useState}来自“React”；
从“Chart.js”导入图表；
常量条形图=（props:BarChartProps，ref）：JSX.Element=>{
const{xAxisLabels，yAxisValues，barSettings，hidelegen}=props；
const barChartRef=useRef（null）；
让我的条形图；
const buildChart=（）=>{
const myBarChartRef=barChartRef.current.getContext（“2d”）；
如果（我的条形图）{
myBarChart.destroy（）；
}
myBarChart=新图表（myBarChartRef{
类型：'bar'，
数据：{…}，
选项：{…}
});
}
useffect（（）=>{
buildChart（）；
}，[buildChart]）；
返回(
)
}
导出默认条形图；

数据是从外部组件动态更改的（尽管我怀疑这与问题有关），如下所示：

export const OutsideComponent=（）=>{
const[ydata，setYData]=useState（getYAxisValues（barChartData））；
const updateGraph=（）=>{
setYData（getYAxisValues（barChartData2））；
}
返回(
更新图表1
)
};

对我来说似乎什么都不管用。我尝试了chart.destroy（）、chart.update（），但似乎没有解决问题。我也尝试过改变反应能力和其他答案提供的任何建议，但仍然一无所获

export const OutsideComponent = () => {
  const [ydata, setYData] = useState(getYAxisValues(barChartData));

  const updateGraph = () => {
    setYData(getYAxisValues(barChartData2));
  }

  return (
    <div>
      <button onClick={updateGraph}>Update Graph1</button>
      <BarChart
        xAxisLabels={getXAxisLabels(barChartData)}
        yAxisValues={ydata}
        barSettings={settings}
      />
    </div>
  )
};