title: Next JS doesnt re render element when state changed
body: <p>i have a code where im fetching the image name</p>
  <pre><code>const [foundImg, setFoundImg] = useState(false)
  var imgNames = []
  ---
  axios.get('http://someapi.com')
  .then(res =&gt; {
    imgNames.push(res.data)
    setFoundImg(true)
  }.catch(err =&gt; console.log(err)
  </code></pre>
  <p>And i put this condition in the return / render</p>
  <pre><code>         { (foundImg === true) 
              ? itemImg.map( i =&gt; {
                return &lt;div className=&quot;product--box&quot;&gt;
                  &lt;Image width={50} height={50} src='/public/dummy.png' className='img'/&gt;
                &lt;/div&gt;
              })
              : null
            }
  </code></pre>
  <p>But the problem is, when the imagenames are fetched, the component doesnt re render. So it is still empty now. How can i make it so that this image are rendered when the fetching returns data?</p>