I am trying to make a web-chat SPA web application using WebRTC, Firebase and React.js . Currently the collection in the database is being created under calls, but inside the document it just says NEW and there is no callId etc to allow me to connect the two users. Have been stuck on this for some time now.. Does anyone see the issue here? The error I am getting is “Uncaught FirebaseError: Invalid document reference. Document references must have an even number of segments, but calls has 1.”

import React, { useState, useRef, useEffect } from 'react';
import { doc, collection, setDoc, updateDoc, getDoc, onSnapshot, addDoc } from 'firebase/firestore';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const db = getFirestore();
const auth = getAuth();

const VideoCall = () => {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const [callId, setCallId] = useState('');
  const [isCaller, setIsCaller] = useState(false);
  const [iceCandidatesQueue, setIceCandidatesQueue] = useState([]);

  const peerConnectionRef = useRef(null);
  const webcamButtonRef = useRef(null);
  const callButtonRef = useRef(null);
  const answerButtonRef = useRef(null);
  const callInputRef = useRef(null);
  const webcamVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);

  const initializePeerConnection = () => {
    if (peerConnectionRef.current) return;

    peerConnectionRef.current = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
    });

    peerConnectionRef.current.onicecandidate = (event) => {
      if (event.candidate) {
        const candidatesCollection = isCaller
          ? collection(doc(db, 'calls', callId), 'offerCandidates')
          : collection(doc(db, 'calls', callId), 'answerCandidates');

        addDoc(candidatesCollection, event.candidate.toJSON());
      }
    };

    peerConnectionRef.current.ontrack = (event) => {
      const [remoteStream] = event.streams;
      if (remoteStream) {
        setRemoteStream(remoteStream);
      }
    };
  };

  useEffect(() => {
    if (peerConnectionRef.current && peerConnectionRef.current.remoteDescription) {
      iceCandidatesQueue.forEach(candidate => {
        peerConnectionRef.current.addIceCandidate(candidate);
      });
      setIceCandidatesQueue([]); // Clear the queue after adding
    }
  }, [peerConnectionRef.current?.remoteDescription]);

  const handleWebcamButtonClick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    setLocalStream(stream);

    if (peerConnectionRef.current) {
      stream.getTracks().forEach(track => peerConnectionRef.current.addTrack(track, stream));
    }

    webcamVideoRef.current.srcObject = stream;
  };

  const handleCallButtonClick = async () => {
    initializePeerConnection();

    // Create a new document for the call
    const callDocRef = doc(collection(db, 'calls')); // Create a new document reference in 'calls'
    const offerCandidatesRef = collection(callDocRef, 'offerCandidates');
    const answerCandidatesRef = collection(callDocRef, 'answerCandidates');

    setCallId(callDocRef.id);
    setIsCaller(true);

    // Create offer
    const offerDescription = await peerConnectionRef.current.createOffer();
    await peerConnectionRef.current.setLocalDescription(offerDescription);

    await setDoc(callDocRef, { offer: { sdp: offerDescription.sdp, type: offerDescription.type } });

    onSnapshot(callDocRef, snapshot => {
      const data = snapshot.data();
      if (data?.answer && !peerConnectionRef.current.remoteDescription) {
        const answerDescription = new RTCSessionDescription(data.answer);
        peerConnectionRef.current.setRemoteDescription(answerDescription);
      }
    });

    onSnapshot(answerCandidatesRef, snapshot => {
      snapshot.docChanges().forEach(change => {
        if (change.type === 'added') {
          const candidate = new RTCIceCandidate(change.doc.data());
          if (peerConnectionRef.current.remoteDescription) {
            peerConnectionRef.current.addIceCandidate(candidate);
          } else {
            setIceCandidatesQueue(queue => [...queue, candidate]);
          }
        }
      });
    });
  };

  const handleAnswerButtonClick = async () => {
    initializePeerConnection();

    const callDocRef = doc(db, 'calls', callId);
    const answerCandidatesRef = collection(callDocRef, 'answerCandidates');
    const offerCandidatesRef = collection(callDocRef, 'offerCandidates');

    setIsCaller(false);

    const callData = (await getDoc(callDocRef)).data();
    const offerDescription = callData.offer;

    await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offerDescription));

    const answerDescription = await peerConnectionRef.current.createAnswer();
    await peerConnectionRef.current.setLocalDescription(answerDescription);

    await updateDoc(callDocRef, { answer: { sdp: answerDescription.sdp, type: answerDescription.type } });

    onSnapshot(offerCandidatesRef, snapshot => {
      snapshot.docChanges().forEach(change => {
        if (change.type === 'added') {
          const candidate = new RTCIceCandidate(change.doc.data());
          if (peerConnectionRef.current.remoteDescription) {
            peerConnectionRef.current.addIceCandidate(candidate);
          } else {
            setIceCandidatesQueue(queue => [...queue, candidate]);
          }
        }
      });
    });
  };

  return (
    <div className="videowindow">
      <div className="video-container">
        <video ref={webcamVideoRef} autoPlay muted></video>
        <video ref={remoteVideoRef} autoPlay></video>
      </div>
      <div className="input-container">
        <input 
          ref={callInputRef} 
          type="text" 
          placeholder="Call ID" 
          onChange={(e) => setCallId(e.target.value)} 
        />
      </div>
      <div>
        <button 
          ref={webcamButtonRef} 
          onClick={handleWebcamButtonClick}
        >
          Start Webcam
        </button>
        <button 
          ref={callButtonRef} 
          onClick={handleCallButtonClick}
        >
          Call
        </button>
        <button 
          ref={answerButtonRef} 
          onClick={handleAnswerButtonClick}
        >
          Answer
        </button>
      </div>
    </div>
  );
};

export default VideoCall;

I have tried changing the logic, but cannot see where the issue is.