sendbird chat customized

Chat.jsx

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import CustomizedScreen from './ChatScreen';
import "@sendbird/uikit-react/dist/index.css";
const APP_ID = 'FFFFF-20ED-4624-84C6-FFFFFFF';
const USER_ID = 'pavel-test-666';

const isSSR = () => typeof window === 'undefined'; 

export const Chat = () => {
    return (
        <div className="Chat">
            {

                <SendbirdProvider
                    // Add the two lines below.
                    appId={APP_ID}   // Specify your Sendbird application ID.
                    userId={USER_ID}        // Specify your user ID.
                >
                    <CustomizedScreen />
                </SendbirdProvider>


            }

        </div>
    );
};

gistfile1.txt

import React, { useState, useCallback } from 'react';

import SBConversation from '@sendbird/uikit-react/Channel';
import SBChannelList from '@sendbird/uikit-react/ChannelList';
import SBChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import withSendbird from '@sendbird/uikit-react/withSendbird';


function ChatScreen(props) {

    const {
        stores: { sdkStore, userStore },
        config: {
            isOnline,
            userId,
            appId,
            accessToken,
            theme,
            userListQuery,
            logger,
            pubSub,
        }
    } = props

    const logDefaultProps = useCallback(() => {
        console.log(
            "SDK store list log",
            sdkStore.initialized,
            sdkStore.sdk,
            sdkStore.loading,
            sdkStore.error
        );
        console.log(
            "User store list log",
            userStore.initialized,
            userStore.user,
            userStore.loading
        );
        console.log(
            "Config list log",
            isOnline,
            userId,
            appId,
            accessToken,
            theme,
            userListQuery,
            logger,
            pubSub
        );
    }, [
        sdkStore.initialized,
        sdkStore.sdk,
        sdkStore.loading,
        sdkStore.error,
        userStore.initialized,
        userStore.user,
        userStore.loading,
        isOnline,
        userId,
        appId,
        accessToken,
        theme,
        userListQuery,
        logger,
        pubSub
    ]);

    logDefaultProps();

    const [showSettings, setShowSettings] = useState(false);
    const [currentChannelUrl, setCurrentChannelUrl] = useState('');

    return (
        <div className="customized-app">
            <div className='sendbird-app__wrap'>
                <div className='sendbird-app__channellist-wrap'>
                    <SBChannelList
                        onChannelSelect={(channel) => {
                            if (channel && channel.url) {
                                setCurrentChannelUrl(channel.url);
                            }
                        }}
                    />
                </div>
                <div className='sendbird-app__conversation-wrap'>
                    <SBConversation
                        channelUrl={currentChannelUrl}
                        onChatHeaderActionClick={() => {
                            setShowSettings(true);
                        }}
                    />
                </div>
            </div>
            {showSettings && (
                <div className='sendbird-app__settingspanel-wrap'>
                    <SBChannelSettings
                        channelUrl={currentChannelUrl}
                        onCloseClick={() => {
                            setShowSettings(false);
                        }}
                    />
                </div>
            )}
        </div>
    );
};

export default withSendbird(ChatScreen);