Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application

Sendbird Chat UIKit React
,
1

[Problem/Question]
When I open the sendbird component, this error occurs

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at ChannelListProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-DFGDUASH.js?v=ee64f805:795:5)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PG3X6BPR.js?v=ee64f805:4536:46
    at Box3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PG3X6BPR.js?v=ee64f805:6941:19)
    at VoicePlayerProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PIRVV4D2.js?v=ee64f805:3066:5)

here is my component in sendbird

import React, { useState } from 'react';
import '@sendbird/uikit-react/dist/index.css';
import { Mui } from '@onedesign/ui';
import { useSendbirdService } from 'services/SendbirdService';
import { GroupChannel } from '@sendbird/chat/groupChannel';
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import { useLoginService } from 'services/LoginService';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
import ChannelListUI from './ChannelListUI';

const { Box } = Mui;

const SendbirDialog = () => {
  const [currentChannelSelected, setCurrentChannelSelected] =
    useState<GroupChannel>();
  const { loginUser } = useLoginService();
  const { sendbirdAccessToken, myColorSet } = useSendbirdService();

  if (!loginUser?.staffNumber || !sendbirdAccessToken) return null;

  return (
    <Box
      sx={{
        pl: '32px',
        pr: '32px',
        pb: '120px',
        pt: '32px',
      }}
    >
      <SendbirdProvider
        appId={import.meta.env.VITE_SENDBIRD_APP_ID}
        userId={loginUser?.staffNumber}
        colorSet={myColorSet}
        accessToken={sendbirdAccessToken}
      >
        <Box
          sx={{
            display: 'flex',
            height: '100%',
          }}
        >
          <ChannelListProvider
            queries={{
              channelListQuery: {
                includeEmpty: true,
              },
            }}
            disableAutoSelect={true}
            isTypingIndicatorEnabled={true}
          >
            <ChannelListUI
              setCurrentChannelSelected={setCurrentChannelSelected}
              currentChannelSelected={currentChannelSelected}
            />
          </ChannelListProvider>
        </Box>
      </SendbirdProvider>
    </Box>
  );
};

export default SendbirDialog;

here is the parent component to control open or close the sendbird component

  const [openSendbird, setOpenSendbird] = useState(false);

....

  const handleOpenSendbirdDialog = () => {
    setOpenSendbird(prev => !prev);
  };

...

 {openSendbird && (
                <Box
                  sx={{
                    position: 'absolute',
                    top: '30%',
                    left: '-255%',
                  }}
                >
                  <SendbirDialog />
                </Box>
              )}

[UIKit Version]
“@sendbird/uikit-react”: “^3.6.7”,

[Frequency]
everytime

[Current impact]
This error occurs every time the component is opened