sendbird custom channel preview override

CustomChannelPreview.tsx

import { useSendbirdStateContext } from "@sendbird/uikit-react";
import ChannelPreview  from "@sendbird/uikit-react/ChannelList/components/ChannelPreview";
import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';


interface CustomChannelPreviewInterface extends SendbirdUIKitGlobal.ChannelPreviewInterface {
    startupId: number;
}

const CustomChannelPreview = (props:CustomChannelPreviewInterface) => {
    const {channel, startupId, ...restProps} = props;
    const sbState = useSendbirdStateContext();
    const currentUserId = sbState?.stores?.userStore?.user?.userId;

    if (!channel.name || channel.name === "Group Channel") {
        const defaultChannelTitle = (channel?.members || [])
            .filter(({ userId }: {userId:string}) => userId !== currentUserId)
            .map(({ nickname }: {nickname:string}) => (nickname || ""))
            .join(', ');
        const customChannelName = `${defaultChannelTitle} - Startup ${startupId}`;
        channel.name = customChannelName;
    }

    return <ChannelPreview channel={channel} {...restProps} />;
};

export default CustomChannelPreview;