during writing code for JSX file I got an error:

Error: failed to process internal error: entered unreachable code: assign property in object literal is invalid

I could not find any solution. I was searching internet and found similar questions with no answer.

Could you tell me at least why I am getting it?

index.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>
  );
}

Card.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>
  );
}```