I understand each child in a list should have a unique "key" prop but I can't seem to figure out which child needs the key prop in this scenario. Please help.
<Container className="!py-0">
<nav className="my-4">
<Disclosure>
{({ open }) => (
<>
<div className="flex flex-wrap justify-between md:gap-10 lg:flex-nowrap">
<div className="flex items-center justify-between w-full lg:w-auto">
<Link href="/">
<a className="w-28 dark:hidden">
{props.logo ? (
<Image
{...GetImage(
props.logo
)}
alt="Logo"
sizes="(max-width: 640px) 100vw, 200px"
priority={true}
/>
) : (
<span className="block text-center">
Explore A.I. Today
</span>
)}
</a>
</Link>
<Link href="/">
<a className="hidden w-28 dark:block">
{props.logoalt ? (
<Image
{...GetImage(
props.logoalt
)}
alt="Logo"
sizes="(max-width: 640px) 100vw, 200px"
priority={true}
/>
) : (
<span className="block text-center">
Explore A.I. Today
</span>
)}
</a>
</Link>
<Disclosure.Button
aria-label="Toggle Menu"
className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden focus:text-blue-500 focus:outline-none dark:text-gray-300 ">
<svg
className="w-6 h-6 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
{open && (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
/>
)}
{!open && (
<path
fillRule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
/>
)}
</svg>
</Disclosure.Button>
</div>
<div className="flex items-center gap-3">
<div className="flex-col items-center hidden w-full lg:flex lg:flex-row lg:w-auto ">
{menu.map((item, index) => (
<>
{item.children &&
item.children.length >
0 ? (
<DropdownMenu
key={index}
menu={item}
items={
item.children
}
mobile={
props.mobile
}
/>
) : (
<Link
key={index}
href={
item.href
}>
<a
className=" py-2 px-5 font-medium text-gray-600 dark:text-gray-400 hover:text-blue-500 outline-none focus-visible:text-blue-500 focus-visible:ring-2 rounded-full ring-blue-100"
target={
item.external
? "_blank"
: ""
}
rel={
item.external
? "noopener"
: ""
}>
{
item.label
}
</a>
</Link>
)}
</>
))}
</div>
<div className="hidden lg:block">
<form
action="/search"
method="GET">
<SearchInput placeholder="Search Blog" />
</form>
</div>
</div>
</div>
<Disclosure.Panel>
<div className="flex flex-col items-start justify-start order-2 w-full mt-5 -ml-5 lg:hidden">
{menu.map((item, index) => (
<>
{item.children &&
item.children.length >
0 ? (
<DropdownMenu
key={index}
menu={item}
items={
item.children
}
mobile={true}
/>
) : (
<Link
key={index}
href={item.href}>
<a
className=" py-2 px-5 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-blue-500 outline-none focus-visible:text-blue-500 focus-visible:ring-2 rounded-full ring-blue-100"
target={
item.external
? "_blank"
: ""
}
rel={
item.external
? "noopener"
: ""
}>
{item.label}
</a>
</Link>
)}
</>
))}
<div className="px-5 mt-2">
<form
action="/search"
method="GET">
<SearchInput placeholder="Search Blog" />
</form>
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
</nav>
</Container>
