How to put a dynamic data from firestore in the function where() and also use the snap.size to count the total query to be passed in a graph?

I have this data from firestore and I wanted to retrieve it dynamically with a where() but this is the error I'm getting:

TypeError: vaccines is not a function

The user collection:

[![enter image description here][1]][1]

The vaccines collection:

[![enter image description here][2]][2]

Below are the codes:

 const Vaccine = () => {
      const [vaccines, setVaccines] = useState([]);
      useEffect(() => {
        const unsubscribe = firestore
          .collection("vaccines")
          .onSnapshot((snapshot) => {
            const arr = [];
            snapshot.forEach((doc) =>
              arr.push({
                ...doc.data(),
                id: doc.id,
              })
            );
            setVaccines(arr);
          });
    
        return () => {
          unsubscribe();
        };
      }, []);

  //this is the part where the error happens
  {
    vaccines &&
      vaccines((index) => {
        useEffect(async () => {
          const ref = firestore.collection("users");
          const snapshot = await ref
            .where("doses.selectedVaccine", "==", `${index.vaccine}`)
            .where("doses.dose1", "==", true)
            .where("doses.dose2", "==", true)
            .onSnapshot((snap) => {
              console.log("overall", snap.size);
            });
        }, []);
      });
  }
  return <div></div>;
};

export default Vaccine;

I tried this, but it says that there's an error: Error: Rendered more hooks than during the previous render. I wanted to loop through all of the vaccines so I could get the total number of users of those dose1 with true and dose2 with false.

  vaccines &&
    vaccines.map((v, index) => {
      useEffect(async () => {
        const ref = firestore.collection("users");
        const snapshot = await ref
          .where("doses.selectedVaccine", "==", `${index.vaccine}`)
          .where("doses.dose1", "==", true)
          .where("doses.dose2", "==", true)
          .onSnapshot((snap) => {
            setSize(snap.size);
          });
      }, []);
    });

Updated codes: Not much has changed: I wanted to get the snap.size of each of the vaccines so I can put it in the graph. The codes under the comment of dynamic data has en error that says:

error TypeError: doc.data(...).forEach is not a function

from How to put a dynamic data from firestore in the function where() and also use the snap.size to count the total query to be passed in a graph?