title: How correctly fetch and save data inside an array using useEffect
body: <p>I am using React and asynchronously fetching data from the blockchain with useEffect.
  What I do not understand is that while the console.log inside the map function works and it prints the right data, supposedly it should save that data inside data array, but when I log data outside the map (meaning it should have finished to save the data) I get an array of undefined values.
  Code:</p>
  <pre><code>  useEffect(() =&gt; {
      const data = mainnet.Vaults.map((pool) =&gt; {
        const loadLendingData = async () =&gt; {
          const dataPool = await getPoolInfo(pool);
          console.log('dataPool', dataPool) //all good it prints everything
          return dataPool
        };
        loadLendingData();
       })
       console.log('data', data) //[undefined, undefined, undefined and so on]  
       setData(data)
    }, []);
  </code></pre>
  <p>Why is this happening? What am I doing wrong?</p>
  <p>EDIT:
  I fixed the problem by storing data with useState for each loop in map.
  Code:</p>
  <pre><code>  useEffect(() =&gt; {
      mainnet.Vaults.map((pool) =&gt; {
        const loadLendingData = async () =&gt; {
          const dataPool = await getPoolInfo(pool);
          setLendingData((prevPool) =&gt; [...prevPool, dataPool])
        };
        loadLendingData();
       })
    }, []);
  </code></pre>
  <p>But still I'd like to understand why the first example didn't work.</p>