React: Using .map for a child array within an array. Each child in a list should have a unique "key" prop

I’m trying to build a nav menu that gets its data (links, and link names) from an array called navMenuItems. navMenuItems has an array within it for child links as I’m trying to build a menu similar to the mobile https://www.w3schools.com/ one. I’m running into the error "Each child in a list should have a unique "key" prop.", I’m not sure where I should be adding the key prop to, but I have a feeling its this section (full code below):

                    <div>
                      {item.childMenuItems.map((childItem) => {
                        <Link
                          key={childItem.name.replace(' ', '')}
                          href={childItem.url}
                        >
                          {childItem.name}
                        </Link>;
                      })}
                    </div>

Array:

const navMenuItems = [
    { name: 'Home', url: '#' },
    {
      name: 'Skincare Goal',
      url: '#',
      childMenuItems: [
        { name: 'Anti-Aging', url: '/categories/anti-aging' },
        { name: 'Wound Healing', url: '/categories/wound-healing' },
        { name: 'Acne-Fightning', url: '/categories/acne-fightning' },
        { name: 'Brightening', url: '/categories/brightening' },
        { name: 'UV Protection', url: '/categories/uv-protection' },
      ],
    },
    {
      name: 'Ingredients',
      url: '#',
      childMenuItems: [
        { name: 'AHA (All Types', url: '/ingredients/aha' },
        { name: 'Anti-Aging', url: '/ingredients/bha' },
        { name: 'BHA (Salicylic Acid)', url: '/ingredients/anti-aging' },
        { name: 'PHA (All Types)', url: '/ingredients/pha' },
        { name: 'Niacinamide', url: '/ingredients/niacinamide' },
        { name: 'Vitamin A', url: '/ingredients/vitamin-a' },
        { name: 'Hyaluronic Acid', url: '/ingredients/hyaluronic-acid' },
        { name: 'Ceramides', url: '/ingredients/ceramides' },
        { name: 'Azelaic Acid', url: '/ingredients/azelaic-acid' },
      ],
    },

NavBar code snippet:

<ul>
            {navMenuItems.map((item) => {
              /* Implement child links, check if parent link has childen, if not, use link tag, else use a or button? */
              if (
                !Array.isArray(item.childMenuItems) ||
                !item.childMenuItems.length
              ) {
                return (
                  <li key={item.name.replace(' ', '')}>
                    <Link href={item.url}>{item.name}</Link>
                  </li>
                );
              } else {
                return (
                  <>
                    <li key={item.name.replace(' ', '')}>
                      <Link href={item.url}>{item.name}</Link>
                    </li>
                    <div>
                      {item.childMenuItems.map((childItem) => {
                        <Link
                          key={childItem.name.replace(' ', '')}
                          href={childItem.url}
                        >
                          {childItem.name}
                        </Link>;
                      })}
                    </div>
                  </>
                );
              }
            })}
          </ul>

>Solution :

Your problem is this part, here:

          } else {
            return (
              <>
                {/* ... everything else ... */}
              </>

The <> is actually a react element called a Fragment. Most of the time <> is sufficient. The fragment is the element that needs the key for the first map, not the inner li element. When a key is in a fragment, the full name must be used. So instead, do:

          else {
            return (
              <React.Fragment key={item.name.replace(' ', '')}>
                {/* ... everything else ... */}
              </>