durante la escritura del código para el archivo JSX, recibí un error:

Error: no se pudo procesar el error interno: se ingresó un código inalcanzable: la propiedad asignada en el objeto literal no es válida

No pude encontrar ninguna solución. Estaba buscando en Internet y encontré preguntas similares sin respuesta.

¿Podría decirme al menos por qué lo estoy recibiendo?

índice.js

 import CardsContainer from "../components/layout/CardsContainer"; import Nav from "../components/layout/side-nav/Nav"; const cards = [ {id = 1, lake = "Nill", gender = "Male", image = "3"}, {id = 2, lake = "Nill", gender = "Male", image = "3"}, {id = 3, lake = "Nill", gender = "Male", image = "3"}, {id = 4, lake = "Nill", gender = "Male", image = "3"}, ]; export default function Home() { return ( <Fragment> <Nav/> <CardsContainer cards={cards}/> </Fragment> ); }

CardsContainer.js

 export default function CardsContainer(props) { const cards = props.cards; return ( <div> {cards.map((card) => { return (<Card item={card} />); })} </div> ); }

Tarjeta.js

 import Image from "next/image"; import Link from "next/link"; export default function Card(props) { const id = props.item.id; const lake = props.item.lake; const gender = props.item.gender; const image = props.item.image; return ( <Link href={`/item/${id}`}> <a> <div id="card-with-image"> <div> <Image src={`/images/items/${image}.jpg`} alt="Tumbnail Image" width="450" height="150" /> </div> <div> <h1>Lake:</h1> <p> {lake} </p> </div> <div> <h1>Gender:</h1> <p> {gender} </p> </div> </div> </a> </Link> ); }```