
interface KLineChartProps {
    symbol: string;
    interval: string;
};

const KLineChart: React.FC<KLineChartProps> = ({symbol, interval}) => {
  const ref = useRef<HTMLDivElement>(null);
  const [chart, setChart] = useState<Chart|null>(null);
  const [candlesticks, setCandlesticks] = useState<KLineData[]>([]);
  const [kline, setKline] = useState<KLineData>();
  const [waiting, setWaiting] = useState(false);
  const {enqueueSnackbar} = useSnackbar();
  const [webSocket, setWebSocket] = useState<WebSocket | null>(null);

  useEffect(() => {
    if (chart) {
      chart.applyNewData(candlesticks);
    }
  }, [chart, candlesticks]);

  useEffect(() => {
    if (ref && ref.current && !chart) {
      const kLineChart = init(ref.current, {styles: chartStyles});
      setChart(kLineChart);
    }
  }, [ref, chart]);

  useEffect(() => {
    if (kline && chart) {
      chart.updateData(kline);
    }
  }, [kline, chart]);
  
  const connectToWs = () => {
    if (webSocket) {
      webSocket.close();
    }
  
    const newWebSocket = new WebSocket(
      `wss://fstream.binance.com/ws/${symbol.toLocaleLowerCase()}@kline_${interval}`
    );
  
    newWebSocket.onmessage = (message) => {
      const data = JSON.parse(message.data);
      const candleData = data.k;
      const newCandle = {
        timestamp: candleData.t,
        open: parseFloat(candleData.o),
        high: parseFloat(candleData.h),
        low: parseFloat(candleData.l),
        close: parseFloat(candleData.c),
        volume: parseFloat(candleData.v),
      };
      setKline(newCandle);
    };
  
    setWebSocket(newWebSocket);
  };

  const fetchCandlesticks = () => {
    setWaiting(true);
    fetchSymbolsKlines(symbol, interval)?.then((response) => {
      setCandlesticks(
        response.data.map((candlestick: Array<number | string>) => {
          return {
            timestamp: dayjs.utc(candlestick[0]).valueOf(),
            open: parseFloat(candlestick[1].toString()),
            high: parseFloat(candlestick[2].toString()),
            low: parseFloat(candlestick[3].toString()),
            close: parseFloat(candlestick[4].toString()),
            volume: parseFloat(candlestick[5].toString()),
          };
        })
      );
  
      setWaiting(false);
    });
  };
  
  useEffect(() => {
    fetchCandlesticks();
  }, [symbol, interval]);
  
  useEffect(() => {
    if (candlesticks.length > 0) {
      connectToWs();
    }
  }, [candlesticks]);
  return (
    <>
      {
        waiting ? (
          <CircularProgress
            style={{position: "absolute", marginLeft: "1rem"}}
            color="inherit"
            size={32}
          />
        ) : (<></>)
      }
      <Box
        ref={ref}
        id={`chart-${symbol}`}
        sx={{width: "100%", height: "calc(100% - 50px)"}}
      />
    </>
  );
};

отключение от бесокетов как-то не так работает. меняется symbol, идет запрос за новой монетой и подключение к новым весокетам, но пока не придут новые данные по новой монете показаны старые данные вебскоетов, хотя прошел fetch запрос за новой монетой. Как-будто то бы отключение от вебсокетов идет после запроса. Проанализируй и пойми почему так и реши проблему
  