I'm learning how to use Cloud Firestore from Firebase combined with React JS. For starters here what my Cloud Firestore data looks like... I was reading the documentation for V9 but I still had issues. Link to -> Firebase docs : Listen to multiple documents in a collection

I actually even copied and pasted what I read and it worked! BUT!! Only for a brief moment. I wasn't sure if I changed the code by accident. Since for some reason it wasn't rendering to the dom, I console.log a few items and it showed something was happening. I was able to see data values in the console! But still nothing was being rendered. Here's my code... and screenshots of my console.

  const firebaseApp = initializeApp({
apiKey: "Hidden",
authDomain: "Hidden",
projectId: "Hidden",


 });
  const db = getFirestore();

  const [dataFB, set_dataFB] = useState([]);

  async function getSomethingTEST() {
    let items = [];
    const q = await query(collection(db, "WNA-Pasteur-Items"));
    await onSnapshot(q, (querySnapshot) => {
      querySnapshot.forEach((doc) => {
        items.push(doc); // <-- Here I also tried doc.data().nameENG
      });             // And was able to see the specific values in the console. 
      console.log("What is inside: ", items.join(", "));
    });
    set_dataFB(items);
  }

  useEffect(() => {
    getSomethingTEST();
  }, []);

The first console.log with only items from doc , I got this... The second console.log with doc.data().nameENG , I got this...

Then with my JSX code looked liked this.

    <p>please work</p>
    {dataFB.map((e) => (
      <div key={e.id}>
        <h3>{e.nameENG}</h3>
      </div>
    ))}

Which rendered this...