TypeError: Cannot read properties of undefined (reading 'call')

**What version of this package are you using?** "simple-peer": "^9.11.1",

**What operating system, Node.js, and npm version?**
Node.js version v20.9.0
npm version v10.1.0
**What happened?**
i used the library as the docs say but i am getting the below error, any suggestion would be appreciated thanks in advance!
```
simple-peer.js?v=59db85ac:4087 Uncaught
TypeError: Cannot read properties of undefined (reading 'call')
at _Peer.Readable (simple-peer.js?v=59db85ac:4087:14)
at new Duplex (simple-peer.js?v=59db85ac:3405:16)
at new _Peer (simple-peer.js?v=59db85ac:5021:9)
at callUser (SocketContext.jsx:61:28)
at onClick (Options.jsx:86:102)
at HTMLUnknownElement.callCallback2 (chunk-6VWAHX6D.js?v=59db85ac:3674:22)
at Object.invokeGuardedCallbackDev (chunk-6VWAHX6D.js?v=59db85ac:3699:24)
at invokeGuardedCallback (chunk-6VWAHX6D.js?v=59db85ac:3733:39)
at invokeGuardedCallbackAndCatchFirstError (chunk-6VWAHX6D.js?v=59db85ac:3736:33)
at executeDispatch (chunk-6VWAHX6D.js?v=59db85ac:7014:11)
```
and here is my implementation for reference
SocketContext.jsx
```
import { createContext, useRef, useState, useEffect } from "react";
import { io } from "socket.io-client";
import Peer from "simple-peer";

const SocketContext = createContext();

const socket = io("http://localhost:5000");

const SocketContextProvider = ({ children }) => {
const [stream, setStream] = useState(null);
const [me, setMe] = useState("");
const [name, setName] = useState("");
const [call, setCall] = useState({});
const [callAccepted, setCallAccepted] = useState(false);
const [callEnded, setCallEnded] = useState(false);

const myVideo = useRef();
const userVideo = useRef();
const connectionRef = useRef();

useEffect(() => {
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((currentStream) => {
console.log(currentStream);
currentStream && setStream(currentStream);
if(myVideo?.current) {
myVideo.current.srcObject = currentStream;
}
});
socket.on("me", (id) => setMe(id));

socket.on("callUser", ({ from, name: callerName, signal }) => {
setCall({ isReceivingCall: true, from, name: callerName, signal });
});
}, []);

const answerCall = () => {
setCallAccepted(true);
const peer = new Peer({ initiator: false, trickle: false, stream });

peer.on("signal", (data) => {
socket.emit("answerCall", { signal: data, to: call.from });
});

peer.on("stream", (currentStream) => {
userVideo.current.srcObject = currentStream;
});

peer.signal(call.signal);

connectionRef.current = peer;
};

const callUser = (id) => {
if (!stream) {
console.error("Stream is not available");
return;
}

const peer = stream && new Peer({ initiator: true, trickle: false, stream });

peer.on("signal", (data) => {
console.log(data);
socket.emit("callUser", {
userToCall: id,
signalData: data,
from: me,
name,
});
});

peer.on("stream", (currentStream) => {
console.log(currentStream);
userVideo.current.srcObject = currentStream;
});
socket.on("callAccepted", (signal) => {
setCallAccepted(true);

peer.signal(signal);
});

connectionRef.current = peer;
};

const leaveCall = () => {
setCallEnded(true);

connectionRef.current.destroy();

window.location.reload();
};

return (

{children}

);
};

export { SocketContext, SocketContextProvider}

```