const [candlesticks, setCandlesticks] = useState<any>([]);
  const [kline, setKline] = useState<any>(undefined);
  const [ws, setWs] = useState<WebSocket|undefined>(undefined);
  
  const connectToWs = () => {
    const webSocket = new WebSocket(wss://fstream.binance.com/stream?streams=${symbol}@kline_1m);

    webSocket.onmessage = (message) => {
      const {data} = JSON.parse(message.data);
      setKline({
        x: dayjs.utc(data.k.t).local().toDate(),
        y: [
          parseFloat(data.k.o),
          parseFloat(data.k.h),
          parseFloat(data.k.l),
          parseFloat(data.k.c),
        ],
      });
    };

    setWs(webSocket);
  };

  const fetchCandlesticks = () => {
    axios
      .get(https://fapi.binance.com/fapi/v1/klines?limit=30&symbol=${symbol}&interval=1m)
      .then(response => {
        setCandlesticks(
          response.data.map((candlestick: Array<number|string>) => {
            return {
              x: dayjs.utc(candlestick[0]).local().toDate(),
              y: [
                parseFloat(candlestick[1].toString()),
                parseFloat(candlestick[2].toString()),
                parseFloat(candlestick[3].toString()),
                parseFloat(candlestick[4].toString()),
              ],
            };
          })
        );

        connectToWs();
      });
  };

нужно сделать из этих данных график на библиотеке
import {
  init,
  dispose,
  Chart,
  DeepPartial,
  IndicatorFigureStylesCallbackData,
  Indicator,
  IndicatorStyle,
  KLineData,
  utils,
} from "klinecharts";

  return <>
    <Box
      ref={ref}
      id={chart-${symbol}}
      width="100%"
      height="100%"
      sx={{borderLeft: "2px solid #F5F5F5"}}
    >
    </Box>
  </>;

как мне из этих данных сделать рабочий график на react и typesript с библиотекой klinecharts, с отображением и обновлением
https://klinecharts.com/en-US/guide/getting-started.html  V9.2.2