Create Channel button doesn't disappear from group channel list component

Sendbird Chat UIKit React
,
1

[Problem/Question]
// Detailed description of issue.

In development environments, the Create Channel button disappears, but after deployment, the button is still there.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
// What version of the SDK are you using?

    "@sendbird/uikit-react": "^3.14.0",

[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.

// components/chat/index.tsx
import dynamic from "next/dynamic";

import ChatList from "./list";
import ChatChannel from "./channel";

const ChatProvider = dynamic(() => import("components/Chat/provider"), {
  ssr: false,
  loading: () => <p>...</p>,
});

const Chat = ({ appId, userId, nickname, profileUrl, channelUrl, selectChannel }) => (
  <ChatProvider {...{ appId, userId, nickname, profileUrl }}>
    <ChatList {...{ channelUrl, selectChannel }} />

    <ChatChannel {...{ channelUrl }} />
  </ChatProvider>
);

export default Chat;

// components/chat/provider.tsx
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";

const ChatProvider = ({ appId, userId, nickname, profileUrl, children }) => (
  <SendbirdProvider {...{ appId, userId, nickname, profileUrl }}>{children}</SendbirdProvider>
);

export default ChatProvider;

// components/chat/list.tsx
import { GroupChannelList } from "@sendbird/uikit-react/GroupChannelList";
import { GroupChannel } from "@sendbird/chat/groupChannel";

const ChatList = ({ channelUrl, selectChannel }: ChatListComponentProps) => (
  <GroupChannelList
    disableAutoSelect
    {...{
      selectedChannelUrl: channelUrl,
      onChannelCreated: () => {},
      onChannelSelect: selectChannel,
      allowProfileEdit: false,
    }}
  />
);

type ChatListComponentProps = {
  channelUrl: string;
  selectChannel(channel: GroupChannel): void;
};

export default ChatList;

// components/chat/channel.tsx
import { GroupChannel } from "@sendbird/uikit-react/GroupChannel";

const ChatChannel = ({ channelUrl }: ChatChannelComponentProps) => (
  <GroupChannel {...{ channelUrl }} />
);

type ChatChannelComponentProps = {
  channelUrl: string;
};

export default ChatChannel;

// pages/chat/index.tsx
// ...

const CardBodyStyleProps: GridProps = {
  flexWrap: "nowrap",
  height: 1,
  width: 1,
  pb: 7,
  sx: {
    ".sendbird-channel-list": {
      border: "1px solid rgba(0, 0, 0, 0.12)",
      borderRight: "none",
    },
    ".sendbird-conversation": {
      border: "1px solid rgba(0, 0, 0, 0.12)",
    },
    ".sendbird-channel-list__body": {
      scrollbarWidth: "none",
    },
    ".sendbird-channel-header": {
      borderRight: "1px solid rgba(0, 0, 0, 0.12)",
    },
    // This was the actual class name for the Create channel icon button. I checked it in my browser.
    ".sendbird-ui-header__right .sendbird-ui-header--is-desktop": {
      display: "none",
    },
    ".sendbird-channel-header .sendbird-channel-header__right-icon": {
      display: "none",
    },
  },
};

          // ...

          <Grid container {...CardBodyStyleProps}>
            <Chat
              {...{
                appId: sendbirdApplicationID,
                userId: sendbirdUserId,
                nickname: sendbirdNickname,
                profileUrl: sendbirdProfileUrl,
                channelUrl,
                selectChannel,
              }}
            />
          </Grid>

          // ...

[Frequency]
// How frequently is this issue occurring?

I always have the same issue after deployment.

[Current impact]
// How is this currently impacting your implementation?

I need to restrict users from creating channels, but I can’t.

2

Fixed.

    ".sendbird-ui-header__right .sendbird-ui-header--is-desktop": {
      display: "none",
    },

    ".sendbird-ui-header__right": {
      display: "none",
    },