我试图在react页面中显示SPY的每日回报，并将其显示在ChartJS图形上。我使用的是Chart JS和Alphavantage的API调用。我使用以下代码。我没有收到任何错误，但我看到的只是一个空白的白色屏幕。
我已经输入了我的API密钥。

import React, { useEffect, useState } from "react";
import { Chart } from "chart.js";

const SPYChart = () => {
  const [chartData, setChartData] = useState({});

  useEffect(() => {
    const fetchSPYData = async () => {
      const response = await fetch(
        "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=SPY&outputsize=compact&apikey=<My Api has been inserted>"
      );
      const data = await response.json();
      const dailyReturns = calculateDailyReturns(data["Time Series (Daily)"]);
      const labels = Object.keys(dailyReturns);
      const values = Object.values(dailyReturns);
      setChartData({
        labels: labels,
        datasets: [
          {
            label: "Daily Percentage Returns of SPY",
            data: values,
            borderColor: "#3e95cd",
            fill: false,
          },
        ],
      });
    };

    const calculateDailyReturns = (data) => {
      const closePrices = Object.values(data).map((item) =>
        parseFloat(item["4. close"])
      );
      const dailyReturns = {};
      for (let i = 1; i < closePrices.length; i++) {
        const todayReturn =
          (closePrices[i] - closePrices[i - 1]) / closePrices[i - 1];
        dailyReturns[Object.keys(data)[i]] = todayReturn;
      }
      return dailyReturns;
    };

    fetchSPYData();
  }, []);

  useEffect(() => {
    const ctx = document.getElementById("SPYChart");
    new Chart(ctx, {
      type: "line",
      data: chartData,
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Daily Percentage Returns of SPY",
        },
        scales: {
          xAxes: [
            {
              type: "time",
              time: {
                unit: "day",
                displayFormats: {
                  day: "MMM D",
                },
              },
              ticks: {
                maxTicksLimit: 10,
              },
            },
          ],
          yAxes: [
            {
              ticks: {
                callback: function (value, index, values) {
                  return (value * 100).toFixed(2) + "%";
                },
              },
            },
          ],
        },
      },
    });
  }, [chartData]);

  return (
    <div>
      <canvas id="SPYChart" width="100" height="100"></canvas>
    </div>
  );
};

export default SPYChart;

我尝试输入基本的样板线图Chart JS代码，它已经工作了。所以我知道问题出在这里的代码上，而不是react应用程序的其他部分。当我注解掉这段代码时，我得到了我期望的显示（减去图形）。