react-multi-carousel Each child in a list should have a unique "key" prop.

[leonogas]

I'm having this issue, normally the solution is very easy but in this case it seems to be related to this library.
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using . See https://reactjs.org/link/warning-keys for more information.
at Slideshow2 (webpack-internal:///(ssr)/./app/components/Carroussel/home/Slideshow2.jsx:21:23)
at Lazy
at div
at div
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:240:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71

I'm using the data.js for testing only. Do you know where is the issue? everything has a unique id.

data.js
`export const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 1024 },
items: 5,
slidesToSlide: 1,
},
desktop: {
breakpoint: { max: 1024, min: 800 },
items: 4,
},
tablet: {
breakpoint: { max: 800, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};

export const productData = [
{
id: 1,
imageurl:
"https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
name: "Colorful sneakers",
price: "19.99£",
description: "Some text about the product..",
},
];
`

Basically I've this structure:

page.js
<div className="px-5"> <SwiperCard images={indexFiles.frontmatter.images} /> </div>

SwiperCard.js
<div className="px-5"> <Slideshow2 images={images.images}></Slideshow2> </div>

Slideshow2.js
`"use client";

import "../home/styles.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Product from "../home/Product";
import { productData, responsive } from "../home/data";
import Link from "next/link";

export default function Slideshow2({ images }) {
const product = productData.map((item) => (
<>

<Link key={item.id} href={/${item.id}}>
{" "}
{/* Use key on Link component */}

</>
));

return (
<>

{product}

</>
);
}
`

and the product.js
`"use client";

import React from "react";

export default function Product(props) {
return (
<div className="card" key={props.id + "div"}>
<img
key={item.id + "img"}
className="product--image"
src={props.url}
alt="product image"
/>
<h2 key={item.id + "h2"}>{props.name}
<p className="price" key={item.id + "p1"}>
{props.price}

<p key={item.id + "p2"}>{props.description}

<p key={item.id + "p3"}>
<button key={item.id + "button"}>Go for it

);
}
`

[leonogas]

the issue was the <></>, I should use the react.fragment at the top with the key I was using.