WebRTC ICE Candidates Not Settling on Receiver Side (React, Socket.io)

I am implementing a video call feature using two separate RTCPeerConnection instances for sending and receiving video. Currently, I have only implemented the sender’s RTC connection, meaning only the receiver can see the sender’s video.

Issue: ICE candidates are received on the receiver’s side but don’t seem to be applied properly. Tracks seem to be received, but no video is displayed.

reciever logs

reciever logs 2

sender logs

webrtc recievr

webrtc sender

function VideoFrameReciever() {
  const { match,  socket } = useAuthStore();
  const remoteVideoRef = useRef();
  const startCall = async () => {
     let candidates= null;
     const sendersPC = new RTCPeerConnection({
         iceServers: [
       { urls: "stun:stun.l.google.com:19302" }, 
       { urls: "stun:global.stun.twilio.com:3478" },
      ],
    });
  socket.on("receive-offer", async ({ sdp, from }) => {
     console.log("offer received");

     await sendersPC.setRemoteDescription(sdp);
     const answer = await sendersPC.createAnswer();
     await sendersPC.setLocalDescription(answer);
     socket.emit("send-answer", {sdp: sendersPC.localDescription,to: match,      
     });