Issue while using useRemoteParticipant in Livekit Nextjs

Question

Before i proceed , let me brief my project. The project aims to make a simple livestream website using livekit. i am using jwtDecode to generate jwt for the host user. and then it will be used further.

I am not being able to get the participant detail as i am getting undefined everytime.

Here is the code of video.tsx

"use client"
import React from 'react'
import { ConnectionState, Track } from 'livekit-client'
import { useConnectionState, useRemoteParticipant , useTracks } from '@livekit/components-react'
import { User } from '@prisma/client'
import LiveVideo from './live-video'


interface VideoProps { 
    hostname: string
    hostIdentity: string
 }


const Video = ({hostIdentity, hostname}: VideoProps) => {

    const connectionState = useConnectionState()
    
    const participant = useRemoteParticipant(hostIdentity);
    // console.log({participant});
    
    const tracks = useTracks([
        Track.Source.Camera,
        Track.Source.Microphone
        ]).filter((track) => track.participant.identity === hostIdentity)
        

        // console.log(participant);
        // console.log("tracks", tracks.length);
    
        

        
    let content    
    
    if(!participant && connectionState === ConnectionState.Connected){
        content = <p>offline</p>

    }else if ( !participant || tracks.length === 0){
        content = <p>loading..</p>
        console.log({ participant });
        // console.log("Connection State:", connectionState);
    }
    else {
        content = <LiveVideo participant={participant}/>
    }

  return (
    <div className='aspect-video border-b group relative'>
        {content}
        </div>
  )
}

export default Video

the hostIdentity is seems to be working fine so there should not be any error because of hostIdentity.