useEffect() and async functions

Question

In my code, I am trying to achieve with fetchProducts() the same as I did with fetchUserCart() but it doesnt seem to work and I dont understand why. The "cart" is fetched correctly when I open the modal but the products come with a delay (only if I click again somewhere and they dont render)

Here is the code: export const Navbarr = ({items}) => {

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

  const handleOpen = () => {

    fetchUserCart();
    fetchProducts();
    setOpen(true);
    
    
    
  
  };

  const fetchProducts=async()=>{
    let products =[];
    currentUserCart.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);
    console.log(currentProducts);
  }



  const fetchUserCart = async() =>{
    const q = query(collection(db, "users"), where("uid", "==", user?.uid));
      const doc = await getDocs(q);
      const data = doc.docs[0].data();  
      setCurrentUserCart(data.cart); 
      console.log('cart '+currentUserCart);
  }

  const handleClose = () =>{
    console.log('click');
    setOpen(false);
  };
  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);
     
  } 

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

and here is the Modal (in the same component)

 <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={{position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 600,
  height: 600,
  bgcolor: 'background.paper',
  boxShadow: 24,
  p: 4,}}>
          <Typography id="modal-modal-title" variant="h6" component="h2" sx={{fontFamily:'Montserrat', textAlign:'center', paddingBottom:'30px'}}>
            Your cart
          </Typography>
          {currentProducts.map((item, key)=>(
            <p>{item.name}</p>
          ))}
        </Box>
      </Modal>

Please explain what I am doing wrong..