Each child in a list should have a unique "key" prop warning in NextJs

I'm getting the following warning in my Next.js web,

app-index.js:31 Warning: Each child in a list should have a unique "key" prop.

I don't know what's the exact issue, since I have already tried a lot of things.

  <div className="hidden lg:block pt-1">
        <NavigationMenu>
          <NavigationMenuList className="space-x-14">
            <NavigationMenuItem className="text-[16px]">
              <Link href={`/shop`}>Shop</Link>
            </NavigationMenuItem>
              {navLinks != null
                ? navLinks.slice(0, 4).map((category: Category) => (
                    <NavigationMenuItem
                      className=" text-[18px]"
                      key={category.id}
                    >
                      <Link href={`/shop/${category.name}`} key={category.id}>
                        {category.name}
                      </Link>
                    </NavigationMenuItem>
                  ))
                : null}
          </NavigationMenuList>
        </NavigationMenu>
      </div>

The warning occurs if I puts this part in the code:

              {navLinks != null
                ? navLinks.slice(0, 4).map((category: Category) => (
                    <NavigationMenuItem
                      className=" text-[18px]"
                      key={category.id}
                    >
                      <Link href={`/shop/${category.name}`} key={category.id}>
                        {category.name}
                      </Link>
                    </NavigationMenuItem>
                  ))
                : null}

I have tried putting the keys on the mapped fields

React usually ask for a key prop whenever you are mapping as you have done above. Besides, looks like you passed the key twice. Try this code, should work

              {navLinks != null
                ? navLinks.slice(0, 4).map((category, index) => (
                    <NavigationMenuItem
                      className=" text-[18px]"
                  key={index}
                    >
                      <Link href={`/shop/${category.name}`}>
                        {category.name}
                      </Link>
                    </NavigationMenuItem>
                  ))
                : null}

You can also use your own code but this way

{navLinks != null
                ? navLinks.slice(0, 4).map((category: Category) => (
                    <NavigationMenuItem
                      className=" text-[18px]"
                      key={category.id}
                    >
                      <Link href={`/shop/${category.name}`}>
                        {category.name}
                      </Link>
                    </NavigationMenuItem>
                  ))
                : null}

Key props are usually passed once and into the parent jsx tag.