In the fetchUserCart() function, I am trying to first get an array containing strings with the product unique name and then set my state array with the result from the second query (query based on first query's result). While the first one works, the second one doesn't and I dont understand why. When I try to map currentProducts to render a table, the array is empty.

export const CartPage = () => {


    const [user,  error] = useAuthState(auth);
  const [cartItems, setCartItems]=React.useState(0);
  const [currentProducts, setCurrentProducts]=React.useState([]);


  const fetchUserCartItems=async()=>{
  
    const q = query(collection(db, "users"), where("uid", "==", user?.uid));
    const doc = await getDocs(q);
    const data = doc.docs[0].data();
    let cartItemsClone=data.cartItems;
    setCartItems(cartItemsClone);  
    
} 

const fetchUserCart = async() =>{
    const q = query(collection(db, "users"), where("uid", "==", user?.uid));
      const doc = await getDocs(q);
      const data = doc.docs[0].data(); 
      let cart=data.cart; 
      console.log(cart);
      let products =[];
      cart.forEach(async(item)=>{
        const q = query(collection(db, "products"), where("uniqueName", "==", item));
        const doc = await getDocs(q);
        const data = doc.docs[0].data();  
        products.push(data);
        
      })
      setCurrentProducts(products);
  }

 
React.useEffect(() => {
  fetchUserCartItems();
  fetchUserCart();
}, [user], [currentProducts] );