How to implement the Channel module using the ChannelProvider and useChannelContext

implementing-channel-module.js

import Channel from '@sendbird/uikit-react/Channel';
import { ChannelProvider, useChannelContext } from '@sendbird/uikit-react/Channel/context';
const MyComponent = () => {
    const channelState = useChannelContext();
    return (
        ...render custom component
    );
};

<ChannelProvider>
    <MyComponent />
<ChannelProvider/>

const CheckMessageText = () => {
    const channelState = useChannelContext();
    return (
        ...render custom component
    );
};

<Channel
    onBeforeSendUserMessage={CheckMessageText}
/>