Is it possible to save MediaStream in react Hooks (useState)? - reactjs

Question

I am woking on WebRTC.
I have declared a variable localStream like
var localStream;
outside the component. The localStream contains the MediaStream at first but when my callback function is called after calling the Signaling Server, the variable localStream is empty. I want to store the MediaStream in the state so that it won't be empty after calling the Signaling server.
on page load -> localStream contains the stream
From client I place a call and it calls Signaling Server
From Signalling Server it calls back the client and here localStream is empty.
I tried useState(), useState(undefined) It doesn't work. It is null.
import ....
const hubUrl = 'https://f1d3e599fe6c.ngrok.io/ConnectionHub';
const conn =
new signalR.HubConnectionBuilder()
.withUrl(hubUrl, signalR.HttpTransportType.WebSockets)
.configureLogging(signalR.LogLevel.Debug)
.withAutomaticReconnect()
.build();
var localStream;
var peerConnectionConfig = { iceServers: [{ url: 'stun:stun.l.google.com:19302' }] };
onst webrtcConstraints = { audio: true, video: true };
const Chat = (props) => {
React.useEffect(() => {
...
}
receivedSdpSignal = (connection, partnerClientId, sdp) => {
console.log('WebRTC: processing sdp signal');
console.log('sdp', sdp);
connection.setRemoteDescription(new RTCSessionDescription(sdp)).then(() => {
console.log('WebRTC: set Remote Description');
if (connection.remoteDescription.type == "offer") {
console.log('WebRTC: remote Description type offer');
console.log('localStream', localStream);
connection.addStream(localStream);
console.log('WebRTC: added stream');
connection.createAnswer().then((desc) => {
console.log('WebRTC: create Answer...');
console.log('WebRTC: Description...');
console.log(desc);
connection.setLocalDescription(desc).then(() => {
console.log('WebRTC: set Local Description...');
console.log(connection.localDescription);
this.sendHubSignal(JSON.stringify({ "sdp": connection.localDescription }), partnerClientId);
}).catch(err => console.log("WebRTC: Error while setting local description", err));
}, err => console.log("WebRTC: Error while creating the answer", err));
} else if (connection.remoteDescription.type == "answer") {
console.log('WebRTC: remote Description type answer');
}
}).catch(err => console.log("WebRTC: Error while setting remote description", err));
}
const initializeUserMedia = () => {
console.log('WebRTC: called initializeUserMedia: ');
mediaDevices.getUserMedia(webrtcConstraints).then((stream) => {
console.log("WebRTC: got media stream");
localStream = stream;
let audioTracks = localStream.getAudioTracks();
if (audioTracks.length > 0) {
console.log(`Using Audio device: ${audioTracks[0].label}`);
}
}).catch(err => console.log("Error getting user media stream.", err));
}
This function is outside UseEffect(){}. The localStream is null here.