title: Add delay into a map with React Hooks
body: <p>I have tried solutions related with Javascript and React using state, but I can't do it with Hooks. I want to <strong>add</strong> 3 seconds delay for each element that I'm rendering on <code>array.map</code></p>
  <pre><code>import React, { useState } from 'react';
  
  const DelayMapHooks = () =&gt; {
      
      const [array, setArray] = useState([1, 2, 3])
      return (
          &lt;div&gt;
              {
                  array.map((elem, key) =&gt; {
                      // ADD DELAY HERE FOR EACH ELEMENT
                      return( &lt;div&gt;Number: {elem}&lt;/div&gt; )
                  })
              }
          &lt;/div&gt;
      );
  };
  
  export default DelayMapHooks;
  </code></pre>
  <p>I have tried adding an await/async immediately after the map, using <code>await delay(3000)</code> with the function</p>
  <blockquote>
  <p>const delay = ms =&gt; {return(new Promise(res =&gt; setTimeout(res, ms)))}</p>
  </blockquote>
  <p>But it doesn't work, showing the error:
  <em>Objects are not valid as a React child (found: [object Promise])</em>. Appreciated any help.</p>