Using Firestore database to work like Realtime

Question

I've looked in all the other questions on stackoverflow and none of them I got an answer or a tutorial that I can use firestore with realtime. I know it's using the snapshot method, but how can I convert something ready using the conventional firestore with realtime? I think there is little documentation on the internet to be able to use firestore that way.

This is my complete CRUD using firestore, but I can not integrate snapshot on this to work without update in F5:

const [name, setName] = useState("");
  const [collaborators, setCollaborators] = useState([]);
  const [isEdit, setIsEdit] = useState(false);
  const [tempId, setTempId] = useState("");

  const collaboratorsCollectionRef = collection(db, "collaborators");

  useEffect(() => {
    const getCollaborators = async () => {
      const data = await getDocs(collaboratorsCollectionRef);
      setCollaborators(
        data.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id,
        }))
      );
    };

    getCollaborators();
  }, []);

  async function createCollaborators() {
    await addDoc(collaboratorsCollectionRef, {
      name,
    });
  }

  async function deleteCollaborator(id) {
    const collaborator = doc(db, "collaborators", id);
    await deleteDoc(collaborator);
  }

  async function updateCollaborator(collaborator) {
    setIsEdit(true);
    setTempId(collaborator.id);
    setName(collaborator.name);
  }

  async function handleSubmitChangeCollaborator() {
    const collaborator = doc(db, "collaborators", tempId);
    await updateDoc(collaborator, {
      name,
    });
    setName("");
  }