import React, {useEffect, useRef, useState} from "react";
import {
  init,
  dispose,
  Chart,
  DeepPartial,
  IndicatorFigureStylesCallbackData,
  Indicator,
  IndicatorStyle,
  KLineData,
  utils,
} from "klinecharts";
export const CandleChart = ({
  candles,
  tradeId,
  symbolName
}: CandleChartProps) => {
// Приходят данные

// Потом идет обработка useEffect(() => {
    chart.current?.applyNewData(candles);
    chart.current?.overrideIndicator({
      name: "VOL",
      shortName: "Объем",
      calcParams: [],
      figures: [
        {
          key: "volume",
          title: "",
          type: "bar",
          baseValue: 0,
          styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
            const kLineData = data.current.kLineData as KLineData;
            let color: string;

            if (kLineData.close > kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].upColor", (defaultStyles.bars)[0].upColor) as string;
            } else if (kLineData.close < kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].downColor", (defaultStyles.bars)[0].downColor) as string;
            } else {
              color = utils.formatValue(indicator.styles, "bars[0].noChangeColor", (defaultStyles.bars)[0].noChangeColor) as string;
            }

            return {color};
          },
        },
      ],
    }, paneId.current);
    chart.current?.createIndicator("VOL", false, {id: paneId.current});
    chart.current?.setPriceVolumePrecision(+pricePrecision, +quantityPrecision);
  }, [candles]);
потом я беру последнюю даты из массива объектов и обновляю график   const getCandleData = async(symbol: string, interval: string, startTime: number, endTime: number) => {
    try {
      const response = await axios.get(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}`);

      const data = response.data;
      const newCandles = data.map((item: any[]) => ({
        timestamp: item[0],
        open: item[1],
        high: item[2],
        low: item[3],
        close: item[4],
        volume: item[5],
      }));
      
      console.log(newCandles);
      
      chart.current?.applyNewData([...candles, ...newCandles]);
    } catch (error) {
      console.log(error);

      return null;
    }
  };
  
  const now = Date.now();

  useEffect(() => {
    if(!candles) return;
    if(candles.length === 0) return;
  
    const startTime = candles[candles.length - 1].timestamp;
    getCandleData(symbolName, interval, startTime, now);
    
  }, [candles, interval]);

// отрисовываю 
   <Box
            ref={ref}
            id={`chart-${tradeId}`}
            width="calc(100% - 55px)"
            height={550 }
            sx={{borderLeft: "2px solid #F5F5F5"}}
          >

// Что нужно сделать?

Данные с сервера
      const response = await axios.get(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}`);

приходят максимум 500 штук. Нужно делать проверку, соответсвует ли последняя дата сегодняшней, учитывая интервал, если нет, то запрашивать еще раз и обновлять график
разумеется  используй typescript