title: Map function only returns an image from Array
body: <p>I have a simple application. I have an upload which reads multiple images into a hook.
  From this I would then like to reduce and display each individual image.
  However, React only ever shows me one image</p>
  <pre><code>useEffect(() =&gt; {
  const CallMe = async () =&gt; {
    // files contains 2 images
    if (files.length &gt; 0) {
      return Promise.all(
        files.map(async (file, idx) =&gt; {
          return new Promise(async (resolve, reject) =&gt; {
            try {
              const image = await resizeFile(file[idx]);
              console.log(image);
  
              resolve(image);
            } catch (error) {
              reject(error);
            }
          });
        })
      );
    }
  };
  
  CallMe().then((res) =&gt; {
    setThumbnails([...thumbnails, res]);
  });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [files]);
  
  
  
   {thumbnails.length &amp;&amp;
      thumbnails?.map((img, idx) =&gt; {
        if (img)
          return (
            //ONLY ONCE IS SHOWN
            &lt;img
              key={idx}
              src={img}
              alt=&quot;soso&quot;
              height={100}
              width={100}
            &gt;&lt;/img&gt;
          );
      })}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/xqeb3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqeb3.png" alt="enter image description here" /></a></p>