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

[aynuayex]

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 (
    <SocketContext.Provider
      value={{stream,me,name,setName,call,callAccepted,callEnded,myVideo,userVideo,answerCall,callUser,leaveCall}}
    >
      {children}
    </SocketContext.Provider>
  );
};

export { SocketContext, SocketContextProvider}