title: Promise.all() inside useEffect in react returns an array of undefined items
body: <p>It works after the fetch, then after Promise.all() returns undefined. Same happens with Promise.allSettled().</p>
  <pre><code>function DrinksPage(props){
      const [drinkCard, setDrinkCard] = useState([]);
  
      var id = props.id;
     
      useEffect( () =&gt;{
          var drinksPromises = 
              id.map( obj =&gt; {
                  var id = obj.idDrink;
                  
                  fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=`+ id)
                  .then(res =&gt; res.json())
                  .then(data =&gt; console.log(data)) //Returns what I want
              });
                 
          Promise.all(drinksPromises).then(data =&gt; {setDrinkCard(data)}) 
      },[id])
      
      console.log(drinkCard); //Returns an array of undefined values
  </code></pre>
  <p>It might be a simple issue since I'm new with react, but I have tried everything I could think of and it's still returning undefined.</p>
  <p>Please, let me know what my mistake/s  is/are, and how can I fix them. Thank you!</p>