Javascript 在React.js中，Chart.js图表的鼠标悬停数据波动问题如何解决

如果我使用Event:[]，那么悬停问题将被修复，但我也想要工具提示.

import Chart from "chart.js";


const Component1 = ({productData,truncatedNames}) => {
  useEffect(() => {
        const canvas = document.getElementById("myChart1");
    // Create the chart context
    const ctx = canvas.getContext("2d");
  
  
    // Define the chart data
    const data = {
      labels: truncatedNames,
      datasets: [
        {
          label: "Products",
          data: productData,
          backgroundColor: "#FA7070",
        },
      ],
    };

    // Configure the chart options
    const options = {
      responsive: true,
      scales: {
        yAxes: [
          {
            display: true,
            ticks: {
              suggestedMin: 0,
              beginAtZero: true,
              callback: productData ? yAxisLabelCallback : emptyFunction,
            },
          },
        ],
      },
      onHover: function (event, chartElements) {},
      hover: false,
    };

    // Create the bar chart
    const myChart = new Chart(ctx, {
      type: "bar",
      data: data,
      options: options,
    });
  }, []);
  return (
   
      <Box>
        <canvas width={"70%"} height={"40%"} id="myChart1"></canvas>
      </Box>
  
  );
};

export default Component1;

请说明或举例说明我在显示另一个客户数据后如何销毁我的图表. 我无法在useEffect中销毁它，因为如果我控制MyChart，那么它会给出未定义的值.