Warning: NavbarButton: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

AFAIK key is passed to <Link> element? -> is it something to do with Link being a wrapper of <a> tag and the key is not being passed into the <a> tag?

import Image from 'next/image';
import Link from 'next/link';

const NavbarButton = ({
  key,
  description,
  route
}:{
  key: number,
  description: string,
  route: string
}) => {
  return (
    <Link key={key} href={route}>{description}</Link>
  )
};

const Navbar = () => {
  const navbar_routes: [string, string][] = [
    ["About us", "/#about-us"],
    ["Our portfolio", "/portfolio"],
    ["Contact us", "/#contact-us"],
    ["Blog", "/blog"]
  ]

  return (
  <>
    <div className="flex justify-between items-center p-8 list-none">
      <Link className="flex justify-around items-center" href="/">
        <Image className="rounded-full" src="/gigashroom-studios-logo.jpg" alt="logo" width={50} height={50}/>
        <p className="text-xl font-custom p-4">Gigashroom Studios</p>
      </Link>
      <div className="flex justify-around items-center list-none text-s font-custom">
        {navbar_routes.map((item, key) => <NavbarButton key={key} description={item[0]} route={item[1]}/>)}
      </div>
    </div>            
  </>
  )                   
};

export default Navbar;