Global state variable updates not available in subsequent use later in the application in ReactJS

Question

I'm trying to store RTCPeerConnection in global state (from one websocket event) and use the connection later (from another websocket event). But I'm unable to get connections in another event. The connections seems to store correctly. I'm not sure if it's related to Async behavior of useState. Please help, I tried following code

...
const {peer, peerMediaElements, setPeer, setPeerMediaElements} = usePeer()
...
...
socket.on("action:peer-add", function (config) {
            let peer_id = config.peer_id
            // let room_id = config.room_id
            if (peer) {
                if (peer_id in peer) {
                    return
                }
            }
            
            console.log("Creating peer connection", peer_id)
            const peerCon = new RTCPeerConnection({iceServers: ICE_SERVERS})
            setPeer(cur => {
                const copy = {...cur}
                copy[peer_id] = peerCon
                console.log("Add Peer")
                return copy
            })
        })
        
        socket.on("action:peer-session", function (config) {
            console.log(peer) // ERROR - No peers available 
            let peer_id = config.peer_id
            let peerCon = peer[peer_id]
            console.log(peer, peer_id, peerCon)
            let remoteDesc = config.session_description
            
            let desc = new RTCSessionDescription(remoteDesc)
            peerCon.setRemoteDescription(
                desc,
                function () {
                    if (remoteDesc.type === "offer") {
                        peerCon.createAnswer(
                            function (localDesc) {
                                peerCon.setLocalDescription(
                                    localDesc,
                                    function () {
                                        socket.emit("request:peer-session", {
                                            peer_id: peer_id,
                                            session_description: localDesc
                                        })
                                    },
                                    function () {
                                        alert("Answer setLocalDescription failed!")
                                    }
                                )
                            },
                            function (error) {
                            }
                        )
                    }
                },
                function (error) {
                }
            )
        })

Here's the Context for usePeer()

import { createContext, useContext, useState } from "react";
export const PeerContext = createContext({});
export const PeerProvider = ({ children }) => { 
const [peer, setPeer] = useState({}); 
const [peerMediaElements, setPeerMediaElements] = useState({}); 
const value = { peer, peerMediaElements, setPeer, setPeerMediaElements } 
return <PeerContext.Provider value={value}>{children}</PeerContext.Provider> };
export const usePeer = () => useContext(PeerContext)