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

I’m new to JSX, I’m building a Nextjs app, and I’m having this irritating error:
“failed to process internal error: entered unreachable code: assign property in object literal is invalid”

This is my index.js

import CardsContainer from "../components/layout/CardsContainer";
import SideNav from "../components/layout/side-nav/SideNav";
import TopNav from "../Components/layout/top-nav/TopNav";


const cards = [
  {id = 1, city = "Riyadh", gender = "Male", image = "1"},
  {id = 2, city = "Riyadh", gender = "Male", image = "1"},
  {id = 3, city = "Riyadh", gender = "Male", image = "1"},
  {id = 4, city = "Riyadh", gender = "Male", image = "1"},
  {id = 5, city = "Riyadh", gender = "Male", image = "1"},
  {id = 6, city = "Riyadh", gender = "Male", image = "1"}
];

export default function Home() {
  
  return (
    <Fragment>
      <TopNav />
      <SideNav/>
      <CardsContainer cards={cards}/>
    </Fragment>
  );
}

This is my CardsContainer.js

export default function CardsContainer(props) {
  //const cards = props.cards;
  const cards = props.cards;

  return (
    <div class="w-9/12 bg-gray-400">
      {cards.map((card) => {
        return (<CatCard cat={card} />);
      })}
    </div>
  );
}

And this is my CarCard.js

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

export default function CatCard(props) {
  
  const id = props.cat.id;
  const city = props.cat.city;
  const gender = props.cat.gender;
  const image = props.cat.image;

  return (
    <Link href={`/catdetails/${id}`}>
      <a>
        <div
          class=" p-2 pb-5 bg-white w-80 rounded-xl border-2"
          id="card-with-image"
        >
          <div class="rounded-xl w-full h-52 overflow-hidden">
            <Image
              className="min-h-full object-cover object-left"
              src={`/images/cats/${image}.jpg`}
              alt="Tumbnail Image"
              width="300"
              height="200"
            />
          </div>
          <div class="px-2 my-4">
            <h2 class="my-3 font-medium text-lg">City:</h2>
            <p class="my-3 text-base text-[#425466]">
              {city}
            </p>
          </div>
          <div class="px-2 my-4">
            <h2 class="my-3 font-medium text-lg">Gender:</h2>
            <p class="my-3 text-base text-[#425466]">
              {gender}
            </p>
          </div>
        </div>
      </a>
    </Link>
  );
}

What do you guys think? I have fiddled with all brackets and curly brackets (and semi-colons), nothing resolved.