title: array of html elements wont render in next js
body: <p>let me say I have some ts where I try to do li lists elements, pushed to array and try do display. Sample code:</p>
  <pre><code>   const MenuList = ():ReactElement =&gt; {
  
      const router = useRouter(),
  liElements:any = [];
  console.log(navRoutes)
  
  useEffect(() =&gt; {
      for(let elem in navRoutes){
          const htmlElement = (
              &lt;&gt;
                  &lt;li&gt;
                      &lt;a
                          href={navRoutes[elem].href}
                      &gt;
                          {navRoutes[elem].name}
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/&gt;
          )
          liElements.push(htmlElement)
      }
      
      
  })
  console.log(liElements,'dups')
  return (
      &lt;&gt;
          &lt;ul className={''}&gt;
      {liElements.map((elem:any) =&gt; elem)}
          &lt;/ul&gt;
      &lt;/&gt;
  )
  </code></pre>
  <p>}</p>
  <p>export { MenuList }`</p>
  <p>why {liElements.map((elem:any) =&gt; elem)}
  doesnt render elements?</p>