I'm trying to implement a basic video calling feature using WebRTC in my React + Firebase app. I've encountered an issue which is that the ICE candidates listener is not firing although the offer and answer objects are correctly added and set. This is the listener

   peerConnection.onicecandidate = async (e) => {
      if (e.candidate) {
        console.log("Adding caller ICE candidates");
        await addDoc(candidatesCollection, e.candidate.toJSON());
      }
    };

The videoCall function looks like this

const videoCall = async () => {
const isCalleeBusy = await checkIfCalleeIsBusy(otherChatMember.uid);

if (isCalleeBusy) {
  alert("Line is busy");
  return;
}

const localStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});
const remoteStream = new MediaStream();

const configuration = {
  iceServers: [
    {
      urls: [
        "stun:stun1.l.google:19302",
        "stun:stun2.l.google:19302",
      ],
    },
  ],
  iceCandidatePoolSize: 10,
};

const peerConnection = new RTCPeerConnection(configuration);

localStream.getTracks().forEach((track) => {
  console.log("Caller adding localstream tracks to PC", track);
  peerConnection.addTrack(track, localStream);
});

const chatRef = doc(db, "chats", chat.chatId);
const roomsCollectionRef = collection(chatRef, "rooms");

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
const roomWithOffer = {
  offer: {
    type: offer.type,
    sdp: offer.sdp,
  },
};
const roomRef = await addDoc(roomsCollectionRef, roomWithOffer);
const candidatesCollection = collection(roomRef, "callerCandidates");

peerConnection.onicecandidate = async (e) => {
  if (e.candidate) {
    console.log("Adding caller ICE candidates");
    await addDoc(candidatesCollection, e.candidate.toJSON());
  }
};

const callData = {
  caller: user,
  callee: otherChatMember,
  chatId: chat.chatId,
  roomId: roomRef.id,
};

await updateDoc(chatRef, {
  call: {
    isActive: true,
    callData,
  },
});

// Listening for updates to the room document
onSnapshot(roomRef, async (snapshot) => {
  const data = snapshot.data();
  if (!peerConnection.currentRemoteDescription && data?.answer) {
    console.log("Set remote description: ", data.answer);
    const answer = new RTCSessionDescription(data.answer);
    await peerConnection.setRemoteDescription(answer);
  }
});

// Code for creating a room below

// Code for creating a room above

// Code for collecting ICE candidates below

// Code for collecting ICE candidates above

peerConnection.addEventListener("track", (event) => {
  console.log("Got remote track:", event.streams[0]);

  event.streams[0].getTracks().forEach((track) => {
    remoteStream.addTrack(track);
  });
  setRemoteStream(new MediaStream(remoteStream.getTracks()));
});

// Listening for remote session description below

// Listening for remote session description above

// Listen for remote ICE candidates below
onSnapshot(collection(roomRef, "calleeCandidates"), (snapshot) => {
  snapshot.docChanges().forEach((change) => {
    if (change.type === "added") {
      const candidate = new RTCIceCandidate(change.doc.data());
      peerConnection.addIceCandidate(candidate);
    }
  });
});
// Listen for remote ICE candidates above
updateStartCallStates(localStream, peerConnection);

};

What could be the issue?

Thanks.