我要显示图表图像，而不是react-chartjs-2和chart.js中的图表。
但是，图像一开始不会完全渲染

export function App() {
  const chartRef = useRef<ChartJS>(null);
  const [chartImg, setChartImg] = useState<string>();

  const ChartRef = () => <Chart ref={chartRef} type="line" data={data} />;
  useEffect(() => {
    const chart = chartRef.current;
    if (!chart) return;
    const img = chart.toBase64Image(); // just white background
    setChartImg(img);
  }, []);

  const showImage = useCallback(() => {
    const chart = chartRef.current;
    if (!chartRef.current) return;
    const img = chart.toBase64Image(); // Correct image is displayed
    setChartImg(img);
  }, []);
  return (
    <div>
      <ChartRef />
      <button type="button" onClick={showImage}>
        Display Image
      </button>
      <img src={chartImg} alt="here" />
    </div>
  );
}

在下面的代码（链接的codesandbox here）中，直到我单击Display Image按钮时才显示图像。
有没有什么方法可以在useEffect上运行初始检查，并确保正确显示图像而不是图表，而不必单击Display Image？