react twilio video: first joiner screen black on participant join

Question

i have made a twillio video app.i can show local video on Laptop website but when i join from another chrome tab or mobile phone chrome browser the video on laptop goes black and only one video is showing whereas both videos should show properly.i am following this tutorial

https://www.twilio.com/blog/build-a-custom-video-chat-app-with-react-and-twilio-programmable-video

here is my code

App.js

            import './App.scss';
            import React, {Component} from 'react';
            import Room from './Components/Room';
            const { connect } = require('twilio-video');
            const Token = {"identity":"Jose Corkery","token":"...sioAMt4..."}

class App extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        identity: '',
        room: null
      }
      this.inputRef = React.createRef();
      this.joinRoom = this.joinRoom.bind(this);
      this.returnToLobby = this.returnToLobby.bind(this);
      this.updateIdentity = this.updateIdentity.bind(this);
      this.removePlaceholderText = this.removePlaceholderText.bind(this)

    }


    async joinRoom() {
        try {
        //  const response = Token
         // const data = await response.json();
          const room = await connect(Token.token, {
            name: 'cool-room',
            audio: true,
            video: true
          });
          // alert(room)
          this.setState({ room: room });
        } catch(err) {
          alert(err);
        }
      }

      updateIdentity(event) {
        this.setState({
          identity: event.target.value
        });
      }


      returnToLobby() {
        this.setState({ room: null });
      }

      removePlaceholderText() {
        this.inputRef.current.placeholder = '';
      }

      render() {
        const disabled = this.state.identity === '' ? true : false;

        return (
          <div className="app">
            { 
              this.state.room === null
              ? <div className="lobby">
                   <input 
                     ref={this.inputRef} 
                     onClick={this.removePlaceholderText} 
                     placeholder="What's your name?"
                     onChange={this.updateIdentity} 

                     />
                  <button disabled = {disabled} onClick={this.joinRoom}>Join Room</button>
                </div>
              :  <Room returnToLobby={this.returnToLobby} room={this.state.room} /> 
            }
          </div>
        );
      }


  }

export default App;

       

Room.jsx

      import React, { Component } from 'react';
      import Participant from './Participant';
      const { connect } = require('twilio-video');

class Room extends Component {

    componentDidMount() {
        this.props.room.on('participantConnected', participant => this.addParticipant(participant));
        this.props.room.on('participantDisconnected', participant => this.removeParticipant(participant));
        window.addEventListener("beforeunload", this.leaveRoom);
    }

    componentWillUnmount() {
        this.leaveRoom();
    }

    addParticipant(participant) {
        console.log(`${participant.identity} has joined the room.`);

        alert(`+ Participant : ${participant.identity}`)

        this.setState({
            remoteParticipants: [...this.state.remoteParticipants, participant]
        })
    }

    removeParticipant(participant) {
         alert(`Leaving : ${participant.identity}`)
        console.log(`${participant.identity} has left the room`);

        this.setState({
            remoteParticipants: this.state.remoteParticipants.filter(p => p.identity !== participant.identity)
        });
    }

    leaveRoom() {
        this.props.room.disconnect();
        this.props.returnToLobby();
    }




    constructor(props) {
        super(props)
        this.state = {
            remoteParticipants: Array.from(this.props.room.participants.values())
        }

        this.leaveRoom = this.leaveRoom.bind(this);

    }


    render() {
        return (
            <div className="room">
                <div className="participants">
                    <Participant
                        key={this.props.room.localParticipant.identity}
                        localParticipant="true"
                        participant={this.props.room.localParticipant} />
                    {
                        this.state.remoteParticipants.map(participant =>
                            <Participant key={participant.identity} participant={participant} />
                        )
                    }
                </div>
                <button id="leaveRoom" onClick={this.leaveRoom}>Leave Room</button>
            </div>
        );
    }


}

export default Room

Participant.jsx

import React, { Component } from 'react';
import Track from './Track';

const { connect } = require('twilio-video');

class Participant extends Component {

    componentDidMount() {
        if (!this.props.localParticipant) {
          this.props.participant.on('trackSubscribed', track => this.addTrack(track));
        }
      }

    constructor(props) {
        super(props);
      
        const existingPublications = Array.from(this.props.participant.tracks.values());
        const existingTracks = existingPublications.map(publication => publication.track);
        const nonNullTracks = existingTracks.filter(track => track !== null)
      
        this.state = {
          tracks: nonNullTracks
        }
      }

      addTrack(track) {
        this.setState({
          tracks: [...this.state.tracks, track]
        });
      }

      render() {
        return ( 
          <div className="participant" id={this.props.participant.identity}>
            <div className="identity">{this.props.participant.identity}</div>
            { 
              this.state.tracks.map(track => 
                <Track key={track} filter={this.state.filter} track={track}/>)
            }
          </div>
        );
      }


}

export default Participant

Track.jsx

import React, { Component } from 'react';

class Track extends Component {

    componentDidMount() {
        if (this.props.track !== null) {
          const child = this.props.track.attach();
          this.ref.current.classList.add(this.props.track.kind);
          this.ref.current.appendChild(child)
        }
      }

    constructor(props) {
        super(props)
        this.ref = React.createRef();
      }


      render() {
        return (
          <div className="track" ref={this.ref}>
          </div> 
        )
      }


}

export default Track

demo:https://android-anime.web.app

i have only two video events onJoin and onLeave do i need additional events ? what is the solution? if your solution works i will award you best answer.Thanks !!