i am creating a meeting app using the stream . i want to integrate the chat in my application meeting room so can anyone tell me where should i integrate the code of my chat .currently i am adding it directly in meeting room but it is rerendering again and again and making the application slow
here is the github repo for all components
text

thankyou

import { cn } from ‘@/lib/utils’;
import { CallControls, CallingState, CallParticipantsList, CallStatsButton, PaginatedGridLayout, SpeakerLayout, useCallStateHooks } from ‘@stream-io/video-react-sdk’;
import React, { useEffect, useState } from ‘react’;
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,

} from "@/components/ui/dropdown-menu"
import { LayoutList, Users, MessageSquare } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import EndCallButton from './EndCallButton';
import Loader from './Loader';
import ChatForMeet from './ChatForMeet';
import { StreamChat} from 'stream-chat';



type CallLayoutType='grid'|'speaker-left'|'speaker-right'
const MeetingRoom = () => {
  const [showChat, setShowChat] = useState(false);
     
    const searchParams=useSearchParams();
    const isPersonalRoom=!!searchParams.get('personal');
    const [layout, setLayout] = useState<CallLayoutType>('speaker-left');
    const [showParticipants,setShowParticipants]=useState(false);
    const {useCallCallingState}=useCallStateHooks();
    const callingState=useCallCallingState();
    const router=useRouter();
    const {useParticipants}=useCallStateHooks();
    const participants= useParticipants();
    const onleavefunctionforthemeeting=async ()=>{
      if(isPersonalRoom)
      {
          const chatClient=StreamChat.getInstance(`${process.env.NEXT_PUBLIC_STREAM_API_KEY}`);
``          const channels=chatClient.queryChannels({type:"messaging"})
          ;
          (await channels).map((channel)=>channel.delete());       
      }
      router.push('/');
    }
    const participantsids=participants.map(participant=>participant.userId);
    if(callingState!==CallingState.JOINED) return <Loader/>
    const CallLayout=()=>{
        switch(layout){
            case 'grid':
                return <PaginatedGridLayout/>
                break;
            case 'speaker-right':
                return <SpeakerLayout participantsBarPosition="left"/>
                break;
            default:
               return <SpeakerLayout participantsBarPosition="right"/>
                break; 
        }
    }
  return (
    <section className='relative h-screen w-full overflow-hidden pt-4 text-white'>
        <div className='relative flex size-full items-center justify-center'>
            <div className='flex size-full max-w-[1000px] items-center'>
             <CallLayout/>
            </div>
            <div className={cn('h-[calc(100vh-86px)] hidden ml-2',{'show-block':showParticipants})}>
                <CallParticipantsList onClose={()=>setShowParticipants(false)}/>
            </div>
              <div className={cn(' hidden ml-2',{'show-block':showChat})}>
                {showChat && <ChatForMeet participantids={participantsids} />} 
            </div>
        </div>
        <div className='fixed bottom-0 flex w-full items-center justify-center gap-5 flex-wrap'>
            <CallControls onLeave={()=>onleavefunctionforthemeeting()}/>
            <DropdownMenu>
                <div className='flex items-center '>
  <DropdownMenuTrigger className='cursor-pointer rounded-2xl  bg-[#19232d] px-4 py-2 hover:bg-[#4c535b]'>
    <LayoutList size={20} className='text-white'/>
  </DropdownMenuTrigger>
                </div>
  <DropdownMenuContent className='border-dark-1 bg-dark-1 text-white'>
     {['Grid','Speaker-left','Speaker-right'].map((item,index)=>(
        <div key={index}>
        <DropdownMenuItem className='cursor-pointer' onClick={()=>{setLayout(item.toLowerCase() as CallLayoutType)}}>
            {item}
        </DropdownMenuItem>
        <DropdownMenuSeparator className='border-dark-1' />
        </div>
     ) )}

    
  </DropdownMenuContent>
</DropdownMenu>
<CallStatsButton/>
<button onClick={()=>setShowParticipants((prev)=>!prev)}>
<div className='cursor-pointer rounded-2xl bg-[#19232d] px-4 py-2 hover:bg-[#4c535b]' >
<Users size={20} className='text-white'/>
</div>
</button>
 <button onClick={() => setShowChat((prev) => !prev)}> {/* Added button to toggle chat */}
          <div className='cursor-pointer rounded-2xl bg-[#19232d] px-4 py-2 hover:bg-[#4c535b]'>
            <MessageSquare size={20} className='text-white' /> {/* Chat icon */}
          </div>
          </button>
{!isPersonalRoom && <EndCallButton/>}
 
        </div>
    </section>
  )
}

export default MeetingRoom