Cannot get GroupChannel to renderHeader

Sendbird Chat UIKit React
,
1

[Problem/Question]
I’m trying to use the GroupChannel renderHeader without success. I can renderHeader on a GroupChannelList but not the GroupChannel. My log statements are not hit at all. Any ideas?

// 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.14”

[Reproduction Steps]
Run the following code:


import React from 'react';
import { SendbirdProvider } from '@sendbird/uikit-react/SendbirdProvider';
import { GroupChannelList } from '@sendbird/uikit-react/GroupChannelList';
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader'
import '@sendbird/uikit-react/dist/index.css';

const CustomHeader = () => (
  <div className="custom-header">
    <h2>My Custom Group Channel Header</h2>
    {/* Add any custom header content here */}
  </div>
);

const CustomChannelPreview = ({ channel }) => (
  <div className="custom-channel-preview">
    <h3>{channel.name}</h3>
    <p>Last message: {channel.lastMessage?.message || 'No messages yet'}</p>
  </div>
);

const CustomGroupChannelHeader = ({ channel }) => (
  <div style={{ padding: '10px', borderBottom: '1px solid red' }}>
    <h2>RENDER ME PLEASE!!!</h2>
  </div>
);

const App = () => {
  const APP_ID = APP_ID
  const USER_ID = USER_ID;
  const [selectedChannel, setSelectedChannel] = React.useState(null);

  return (
    <SendbirdProvider appId={APP_ID} userId={USER_ID}>
      <div className="app-wrapper" style={{ display: 'flex', height: '100vh' }}>
        <div style={{ width: '300px', borderRight: '1px solid #ccc' }}>
          <GroupChannelList
            renderHeader={() => <CustomHeader />}
            renderChannelPreview={(props) => <CustomChannelPreview {...props} />}
            onChannelSelect={(channel) => {
              console.log('Selected channel:', channel);
              setSelectedChannel(channel);
            }}
            onBeforeCreateChannel={(channel) => {
              // Customize channel before creation
              channel.customType = 'my-custom-type';
              return channel;
            }}
          />
        </div>
        {selectedChannel && (
          <div style={{ flex: 1 }}>
            <GroupChannel
              channelUrl={selectedChannel.url}
              renderHeader={() => (
                <CustomGroupChannelHeader channel={selectedChannel} />
              )}
            />
          </div>
        )}
      </div>
    </SendbirdProvider>
  );
};

export default App;

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

[Current impact]
// How is this currently impacting your implementation?
Rendering a custom header is a requirement