我的代码是

import React, { useEffect, useRef, useState } from "react";
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export const PieChart = (props: any) => {
  const [chartIsLoaded, setChartIsLoaded] = useState(false);
  const series: any = [{
    innerSize: '80%',
    name: props.name,
    colorByPoint: true,
    data: props.chartData
  }]
  useEffect(() => {
    setChartIsLoaded(true);
  }, [])

  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
  const options: Highcharts.Options = {
    chart: {
        backgroundColor: "#0c0c0c",
        borderColor: "#0c0c0c",
        plotBorderWidth: 0,
        plotShadow: false,
        type: 'pie',
        height: "70%",
    },
    title: {
        style : {
            display : 'none'
          }
    },
    tooltip: {
      pointFormat: '<b>{point.percentage:.1f}%</b>',
      backgroundColor: "#1B1B1B",
      borderColor: "transparent",
      valueDecimals: 2,
      borderRadius: 0,
      style: {
        color: "#fff",
        fontSize: "15px"

      }
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    legend: {
        itemStyle: {color: "#fff", fontWeight: "400", fontFamily: "teragon-sans"}
    },
    plotOptions: {
        pie: {
            borderColor: "#0c0c0c",
            borderWidth: 6,
            allowPointSelect: true,
            color: "#fff",
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
            },
            showInLegend: true
        }
    },
    series: series
  };
  return (
    <div>
      {chartIsLoaded &&
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          ref={chartComponentRef}
          oneToOne={true}
        />
      }
    </div>
  );
};

chartData来自此代码：

let data = sheetData[0].data;
let invesment = await groupData(data, "Investment Type");

问题：图表渲染多次。而且，我有条形图，它发生在那。没有问题的折线图。数据正在准备与减少功能，但它的异步等待等待。此外，我尝试与承诺。不幸的是，它再次渲染多次。我该如何修复这种情况？