peerConnection remoteDescription remains null

i have my code here to process offer

const processAnOffer = async (
  offer,
  peerConnection,
  remoteCandidates,
  socket,
) => {
  try {
    // Use the received offerDescription
    const offerDescription = new RTCSessionDescription(offer);
    await peerConnection.setRemoteDescription(offerDescription);
    console.log('i have bben set in PEER B');

    const answerDescription = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answerDescription);

    console.log('ice on the callee side', remoteCandidates);
    // Here is a good place to process candidates.
    // processCandidates(remoteCandidates, peerConnection);

    // Send the answerDescription back as a response to the offerDescription.
    const candidates = {
      answer: answerDescription,
      destination: 'peerBtoA',
    };
    const metadata = {
      id: '658df04d8147eab44e29ad1b',
      fullname: 'Umar',
      status: 'on-call',
    };

    const payload = {
      recieverID: JSON.stringify(metadata),
      iceCandidate: JSON.stringify(candidates),
    };

    socket.emit('webrtc-offer-signaling', payload);
  } catch (err) {
    // Handle Errors
  }
};

and also my code to listen to offer that is processed

const handleWebrtcOffer = async data => {
    const metadata = JSON.parse(data.recieverID);
    const signalData = JSON.parse(data.iceCandidate);

    const answerDescription = new RTCSessionDescription(signalData.answer);
    await peerConnection.setRemoteDescription(answerDescription);
    setMetaData(metadata);
  };

const handleWebrtcIce = async data => {
    const metadata = data.recieverID;
    const signalData = JSON.parse(data.iceCandidate);
    if (peerConnection.remoteDescription === null) {
      store.dispatch(setpeerRemoteCandidate(signalData.ice));
      setRemoteCandidate(signalData.ice);
      console.log('remote ice candidate');
    } else {
      store.dispatch(setpeerRemoteCandidate(signalData.ice));
      console.log('peer connection candidate');
      peerConnection.addIceCandidate(signalData.ice);
    }
  };

  useEffect(() => {
    socket.connect();
    socket.on('connect', () => console.log('connected'));
    socket.on('webrtc-offer-signaling', handleWebrtcOffer);
    socket.on('webrtc-ice-signaling', handleWebrtcIce);
  }, []);

which are all from socket

i dont know why after processing the offer and answer my connection state remains at Checking