Unique key prop to list of elements not working

I keep getting the warning: Each child in a list should have a unique “key” prop.

But i have applied a key with an index number to my element yet i don’t see it in the html via dev tools and the key is incrementing so they should be unique. I don’t understand why i still get this warning.

This is my code setup (im using react-bootstrap):

<Nav>
  {items.map((item, index) => (
    <NavLink item={item} index={index} onClick={handleClick} />
  ))}
</Nav>

My nav link element is created like this:

export default function NavLink({ item, index, onClick }: NavLinkProps) {
  let classes = `me-${navSpacing} fs-${fontSize} text-decoration-underline`;
  classes += item.active ? " active" : "";
  const Icon = item.icon;
  console.log(index);
  return (
    <Nav.Link className={classes} key={index} onClick={() => onClick(item.key)}>
      <Icon className={`me-${iconSpacing}`} />
      {item.text}
      {item.page && typeof item.page === "string" && <ExternalIcon />}
    </Nav.Link>
  );
}

My console log output shows (though its not clear to me why i see double) so it is incrementing the index value:

In the dev tools the html does not show a key attribute:

What am i misunderstanding here?