我有这个Chart组件。useEffect作为componentDidMount()工作，所以它应该首先呈现DOM，然后调用fetchChartData。但我在这里面临的问题是，我首先在console.log("111111111", document.getElementById("data-consumed"))中得到null，然后我得到DOM元素，结果我得到来自Highcharts的错误

Uncaught (in promise) Error: Highcharts error #13

因此，我需要知道为什么会发生这种情况，因为useEffect作为componentDidMount工作，应该首先呈现DOM。

const Chart2 = (props) => {
  const fetchChartData = async () => {
    const { fetchChartData } = props;
    const startDate = moment().startOf("year").toISOString();
    const endDate = moment().endOf("year").toISOString();
    const data = await fetchChartData({ startDate, endDate, userId: "XXXXXXX" });
    console.log("111111111", document.getElementById("data-consumed"))
    Highcharts.chart("data-consumed", {
      chart: {
        type: "column",
      },
      title: {
        text: null,
      },
      subtitle: {
        text: "Source: WorldClimate.com",
      },
      xAxis: {
        categories: data.map(({ _id }) => _id),
        crosshair: true,
      },
      yAxis: {
        min: 0,
        title: {
          text: "Rainfall (mm)",
        },
      },
      plotOptions: {
        column: {
          pointPadding: -0.1,
          borderWidth: 0,
          color: "#5036D6",
        },
      },
      series: [
        {
          name: null,
          data: data.map(({ processingStorage }) => processingStorage),
        },
      ],
    });
  };

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

  return (
    <div className="chart-container cursor-pointer">
      <div className="chart-block">
        <h4>Data Consumed</h4>
        <div id="data-consumed" className="graph-block" />
      </div>
    </div>
  );
};

export default Chart2;