Hey all. So I have a dynamic route houses/[id].tsx which renders details about a house.

import UserCard from "@/components/UserCard";
import { getHouseById } from "@/lib/queries/house";
import Image from "next/image";
import React from "react";
import placeholder from "../../../public/placeholder.svg";

export default async function HouseDetails({
  params,
}: {
  params: { id: string };
}) {
  const { id } = params;

  const houseDetails = await getHouseById(id);

  return (
    <div>
      {/* a card for house details */}
      <div className="flex space-x-4 md:p-8">
        <div className="md:w-3/4 border p-4 rounded-lg">
          <div className="rounded-lg overflow-hidden w-fit">
            <Image src={placeholder} alt="house image" />
          </div>
          <div className="flex flex-col space-y-4">
            <h1 className="text-2xl font-semibold">{houseDetails.title}</h1>
          </div>
        </div>
        <div className="md:w-1/4 border rounded-lg h-fit">
          <UserCard publisher={houseDetails.publisher} />
        </div>
      </div>
    </div>
  );
}

getting this error in console: error Error: No house found for id: placeholder.svg

here is the function throwing error:

export const getHouseById = async (id: string): Promise<HouseWithDetails> => {
  const house = await prisma.house.findUnique({
    where: { id },
    ...includeDetailsAndPublisher,
  });

  if (!house) {
    throw new Error(`No house found for id: ${id}`);
  }

  return house;
};

which means that getHouseById is triggered by the image url as if we are visiting that dynamic route. what is wrong here?