我在使用react-chartjs-2库创建自定义工具提示时遇到了一个问题，每当我悬停图表并更改工具提示未来数据的状态时，我的图表都会重新渲染(当前工具提示不存在（我只是记录了一些数据，稍后将使用）
我在尝试创建工具提示时引用了这个问题，但他们使用的是类组件，我使用的是函数组件，但无论如何，它不会真正改变任何东西。如果有人能提供react-chartjs-2自定义工具提示的工作示例，我将非常感激，因为我仍然不确定工具提示是否应该是单独的jsx组件，或者在react中创建自定义工具提示的正确方法是什么。提前谢谢
我的代码

const GraphTooltip = ({ data }) => {
  return (
    <div
      style={{
        padding: 20,
        position: 'absolute',
        border: '1px solid',
        borderColor: '#fff8f9',
        backgroundColor: 'rgba(53,53,53,0.81)',
        borderRadius: 4,
        top: data.top,
        left: data.left,
      }}
    ></div>
  );
};

const LineChart = ({ values, labels }) => {
  const isSSR = useIsSSR();

  const [tooltipData, setTooltipData] = useState(null);

  console.log(tooltipData);

  const chartRef = useRef(null);

  const customTooltip = useCallback(tooltipModel => {
    if (tooltipModel.tooltip.opacity == 0) {
      setTooltipData(null);
      console.log('Hide tooltip');
      return;
    }
    console.log(tooltipModel);
    const chart = chartRef.current;
    const canvas = chart.canvas;

    console.log(canvas);

    if (canvas) {
      const position = canvas.getBoundingClientRect();

      // set position of tooltip
      const left = tooltipModel.tooltip.x;
      console.log(position.left);
      console.log(tooltipModel.tooltip);
      const top = tooltipModel.tooltip.y;

      tooltipData?.top != top && setTooltipData({ top: top, left: left });
    }
  });

  const options = useMemo(() => ({
    scales: {
      x: {
        ticks: {
          beginAtZero: true,
        },
        grid: {
          color: '#EEF5FF',
        },
      },
      y: {
        grid: {
          color: '#EEF5FF',
        },
      },
    },
    plugins: {
      legend: {
        display: false,
        position: 'right',
      },
      tooltip: {
        enabled: false,
        external: customTooltip,
      },
    },
  }));

  const data = {
    labels: labels,
    datasets: [
      {
        data: values,
        fill: false,
        backgroundColor: '#88B1DD',
        borderColor: '#88B1DD',
        pointRadius: 6,
        tension: 0.5,
      },
    ],
  };

  if (isSSR) return null;

  return (
    <>
      <div className="header"></div>
      <div className="relative">
        <Line data={data} options={options} ref={chartRef} />
        {tooltipData ? <GraphTooltip data={tooltipData} /> : <div />}
      </div>
    </>
  );
};