Browser refresh: StateError: There is no upstream conduit

Hi, I have embeddedthe Streams API in an angular project. I have made a custom UI for messaging using amazon connect and amazon chat-js. It works perfectly good untill i refresh the browser. When i refresh my browser i check the

getContact details in connect.EventType.INIT, as you can see in code snippet,
  connect.core.getEventBus().subscribe(connect.EventType.INIT, ()=>{
      this.connectService.getAgent((agent)=>{
        let agentActiveContacts = agent.getContacts();

        if(agentActiveContacts.length != 0){

            agentActiveContacts.map(async (contact: any) => {
              if(contact.getType() == 'chat'){
                try {
                  const mediaController = await contact.getAgentConnection().getMediaController();
                  console.log("Media controller obtained successfully:", mediaController);
                } catch (err) {
                  console.log("Error obtaining media controller:", err);
                }
                
              }
            })
          }
      })
    })

According to documentation promise resolve to a ChatSession.

Gets a Promise with the media controller associated with this connection. The promise resolves to a ChatSession object from amazon-connect-chatjs library.

But i got the error here that

Uncaught (in promise): StateError: There is no upstream conduit! StateError: There is no upstream conduit!

Can you please help me to findout the problem that where i got wrong?