Misbehavior when I have multiple chats open

[Oscar_leyva]

[Problem/Question]
My logic implies to be able to open multiple chats simultaneously, it happens that if I open at least two chats, I can only write and send messages in the last chat opened, the first chat does not let me send messages.

---

[UIKit Version]
// What version of the SDK are you using?
3.16.10

[Reproduction Steps]
// This is my code

import ChannelSettings from "@sendbird/uikit-react/ChannelSettings";
import ChannelSettingMenuList from "@sendbird/uikit-react/ChannelSettings/components/ChannelSettingMenuList";
import "@sendbird/uikit-react/dist/index.css";
import { GroupChannel } from "@sendbird/uikit-react/GroupChannel";
import { GroupChannelList } from "@sendbird/uikit-react/GroupChannelList";
import GroupChannelListHeader from "@sendbird/uikit-react/GroupChannelList/components/GroupChannelListHeader";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import Header from "@sendbird/uikit-react/ui/Header";
import UserListItem from "@sendbird/uikit-react/ui/UserListItem";
import UserProfile from "@sendbird/uikit-react/ui/UserProfile";
import React, { useRef, useState } from "react";

interface MultipleChatsProps {
  appId: string;
  userId: string;
  accessToken?: string;
}
interface ChannelEntry {
  url: string;
  key: string;
}

const ChannelListPage: React.FC<{ onChannelSelect: (url: string) => void }> = ({
  onChannelSelect,
}) => (
  <GroupChannelList
    disableAutoSelect
    onChannelCreated={() => {}}
    onChannelSelect={(c) => c && onChannelSelect(c.url)}
    renderHeader={() => (
      <GroupChannelListHeader
        renderLeft={() => <></>}
        renderMiddle={() => <Header.Title title="Chats" />}
      />
    )}
  />
);

const ChannelWindow: React.FC<{ url: string; uniqueKey: string }> = ({
  url,
  uniqueKey,
}) => {
  const [showSettings, setShowSettings] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative w-[450px] h-[600px] border">
      <GroupChannel
        key={uniqueKey}
        channelUrl={url}
        onChatHeaderActionClick={() => setShowSettings((prev) => !prev)}
        forceLeftToRightMessageLayout
      />
      {showSettings && (
        <div className="absolute inset-0 bg-black/50 flex justify-end">
          <ChannelSettingsPage
            channelUrl={url}
            onClose={() => setShowSettings(false)}
          />
        </div>
      )}
    </div>
  );
};

const ChannelSettingsPage: React.FC<{
  channelUrl: string;
  onClose: () => void;
}> = ({ channelUrl, onClose }) => (
  <ChannelSettings
    channelUrl={channelUrl}
    renderHeader={() => (
      <Header
        renderMiddle={() => <Header.Title title="Settings" />}
        renderRight={() => (
          <Header.IconButton
            type="CLOSE"
            color="BACKGROUND_3"
            onClick={onClose}
            renderIcon={(p) => (
              <Header.Icon {...p} width="24px" height="24px" />
            )}
          />
        )}
      />
    )}
    renderUserProfile={(p) => <UserProfile {...p} disableMessaging />}
    renderUserListItem={(p) => (
      <UserListItem {...p} renderListItemMenu={() => <></>} />
    )}
    renderModerationPanel={(p) => (
      <ChannelSettingMenuList
        {...p}
        menuItems={{
          ...p.menuItems,
          operator: {
            ...p.menuItems.operator,
            bannedUsers: {
              ...p.menuItems.operator.bannedUsers,
              hideMenu: true,
            },
            mutedUsers: { ...p.menuItems.operator.mutedUsers, hideMenu: true },
            freezeChannel: {
              ...p.menuItems.operator.freezeChannel,
              hideMenu: true,
            },
          },
        }}
      />
    )}
  />
);

const MultipleChats: React.FC<MultipleChatsProps> = ({
  appId,
  userId,
  accessToken,
}) => {
  const [channels, setChannels] = useState<ChannelEntry[]>([]);

  const add = (url: string) => {
    setChannels((prev) => {
      if (prev.find((c) => c.url === url)) return prev;
      return [...prev, { url, key: `${url}-${Date.now()}` }];
    });
  };

  return (
    <div className="flex h-screen">
      <SendbirdProvider
        appId={appId}
        userId={userId}
        accessToken={accessToken}
        uikitOptions={{
          groupChannelList: {
            enableMessageReceiptStatus: true,
            enableTypingIndicator: true,
          },
          groupChannel: { enableMention: true },
        }}
      >
        <div className="w-80 border-r">
          <ChannelListPage onChannelSelect={add} />
        </div>
        <div className="flex-1 p-4 flex flex-wrap gap-4 overflow-auto">
          {channels.map((ch) => (
            <ChannelWindow url={ch.url} uniqueKey={ch.key} />
          ))}
        </div>
      </SendbirdProvider>
    </div>
  );
};

export default MultipleChats;

[Frequency]
// Allways

[Current impact]
My users cannot have multiple chats open at the same time and this is very important for the usability of our system.