can you help me with this warning?

I just wrote a bit of code that "probably" relates to that. I'm using KendoReact Chart Component,
on the donut chart there is a feature to write something in the middle of the chart with the attribute name "donutCenterRender". I use it to display total data on api. Everything went smoothly, but I found the warning, so I tried to investigate my code if there is something wrong

const { menuItem, chartApi, listApi } = props;
const [auctionData, setAuctionData] = useState(chartApi);
const [auctionId, setAuctionId] = useState(1);
const [auction, setAuction] = useState(auctionData[auctionId]);
const [Total, setTotal] = useState(0);

//... code

  useEffect(() => {
    const data = auction;
    let Total = 0;

    data.forEach(e => {
      Total += e.total;
    });
    setTotal(Total);
  }, []);

  const donutCenterRenderer = () => {
    return (
      <span>
        <h1>{Total}</h1> Total
      </span>
    );
  };

return (
//...code
      <div className="dash-chart d-flex flex-column bg-transparent">
        <Chart donutCenterRender={donutCenterRenderer}>
          <ChartArea background="transparent" />
          <ChartSeries>
            <ChartSeriesItem
              type="donut"
              data={auction}
              categoryField="status"
              field="total"
              holeSize={60}
              border={{ width: 20 }}
            />
          </ChartSeries>
          <ChartLegend
            position="bottom"
            margin={{ bottom: 20 }}
            orientation="vertical"
            labels={{
              margin: 5,
              content: e => `${e.text} \n ${e.value} Auctions`,
            }}
          />
        </Chart>
      </div>
//...code

Thank you 🙏