In jsx use map() to render elements, same code firstone can't render out but the second one can

Question

In this project I used NextJS JSX.

I try to use map() function to render the array element into link. In the return the first map() render nothing, but ***the second map() is render out links and show on browser.

This two pieces of map() are same, I have no idea why only the second map() is working.

import Link from 'next/link'
import { Fragment } from 'react'

import Nav from '../components/nav'

const Home = () =>{
  let navList = ["Home", "Project", "blog", "About"]

  return(
    <Fragment>
      {
        navList.map((navItem) => {
          navItem === "Home" ? 
          <Link href="/" key={navItem}><a>{navItem}</a></Link> : 
          <Link href={`../${navItem}`} key={navItem}><a>{navItem}</a></Link>
        })
      }

      {
        navList.map((navItem) => (
          navItem === "Home" ? 
          <Link href="/" key={navItem}><a>{navItem}</a></Link> : 
          <Link href={`../${navItem}`} key={navItem}><a>{navItem}</a></Link>
        ))
      }
    </Fragment>
  )
}

export default Home;