title: UseEffect works, but html is not rendering
body: <p>I am using ReactJS, Ethers.js, and solidity.</p>
  <p>Here, I'm using a useEffect to retrieve data from a smart contract (using ethers.js). This works fine.</p>
  <pre><code>    const createAddressArray = async () =&gt; {
        const addressArr = await contract.getArray()
        setAddressArray(addressArr);
        const cArr = [];
        addressArr.map( async (a) =&gt; {
          const data = await contract.getSample(a)
          const lat = parseFloat(data.latitude);
          const lng = parseFloat(data.longitude);
          const l = parseInt(data.somethingelse.toHexString(), 16);
          const message = data.message;
          const address = data.sampleAddress;
  
          cArr.push([lat, lng, l, address, message])
        })
        setCirclesArr(cArr);
        console.log(cArr) // everything here works fine
    };
      createAddressArray()
    }, [])
  </code></pre>
  <p>However, when I call this in the html section, it doesn't work. Perhaps it's because it's running before the circlesArr state is set, but once that's set it should have rerendered right? Apparently not.</p>
  <pre><code>&lt;div&gt;
      {circlesArr}
      {circlesArr.map(() =&gt; {
          console.log('mapping')
      })}
  &lt;/div&gt;
  
  </code></pre>
  <p>The circlesArr does not show up in the div, and &quot;mapping&quot; does not show up in the console, suggesting that the array is empty when this runs. How do I make this run again when the array is updated? Thanks in advance!</p>