webrtc – Failed to set remote answer sdp: Called in wrong state: stable in react native

i am using this code in react native and whenever i handle ‘negotiationneeded’ event, i get this error. i am making this app for 2 devices with seprate interface so some part of this code will look like there are no methods to handle incoming offer

  const { ready, socketId, socket, peer, getAnswer, setLocalDescription, getOffer } = webrtc;
  const [myStream, setMyStream] = useState<any>();
  const [remoteStream, setRemoteStream] = useState<any>();

  useEffect(() => {
    handleCallUser()
  }, [])

  /////////// SEND STREAM ////////////////////
  const sendStreams = useCallback(() => {
    for (const track of myStream.getTracks()) {
      peer.addTrack(track, myStream);
    }
  }, [myStream]);

  /////////////////// SEND OFFER //////////////////
  const handleCallUser = useCallback(async () => {
    const stream = await mediaDevices.getUserMedia({
      audio: true,
      video: {
        frameRate: 30,
        facingMode: 'user'
      },
    });
    notifee.cancelAllNotifications();
    startCall()
    const offer = await getOffer();
    socket.emit("student-offer", { to: socketId.mentor, offer });
    setMyStream(stream);
    sendStreams();
  }, [socketId, socket]);

  /////////// HANDLE CALL ACCEPTED ////////////////////
  const handleCallAccepted = useCallback(
    ({ from, ans }: any) => {
      setLocalDescription(ans);
    },
    [sendStreams]
  );

  /////////// HANDLE NEGOCIATION ////////////////////
  const handleNegoNeeded = useCallback(async () => {
    const offer = await getOffer();
    socket.emit("peer:nego:needed", { offer, to: socketId.mentor });
  }, [socketId, socket]);

  const handleNegoNeedIncomming = useCallback(
    async ({ from, offer }: any) => {
      const ans = await getAnswer(offer);
      socket.emit("peer:nego:done", { to: from, ans });
    },
    [socket]);

  const handleNegoNeedFinal = useCallback(async ({ ans }: any) => {
    await setLocalDescription(ans);
  }, []);

  const handleTracks = async (ev: any) => {
    const remoteStream = ev.streams;
    setRemoteStream(remoteStream[0]);
  }

  useEffect(() => {
    peer.addEventListener("negotiationneeded", handleNegoNeeded);
    peer.addEventListener("track", handleTracks);
    return () => {
      peer.removeEventListener("negotiationneeded", handleNegoNeeded);
      peer.removeEventListener("track", handleTracks);
    };
  }, [handleNegoNeeded]);


  /////////// HANDLE SOCKETS ////////////////////
  useEffect(() => {
    socket.on("offer-accepted", handleCallAccepted);
    socket.on("peer:nego:needed", handleNegoNeedIncomming);
    socket.on("peer:nego:final", handleNegoNeedFinal);

    return () => {
      socket.off("call:accepted", handleCallAccepted);
      socket.off("peer:nego:needed", handleNegoNeedIncomming);
      socket.off("peer:nego:final", handleNegoNeedFinal);
    };
  }, [socket, handleCallAccepted, handleNegoNeedIncomming, handleNegoNeedFinal]);

!!!!!!!!!!!!! Ignore this text !!!!!!!!!! Ignore this text !!!!!!!!!!