im so confused how can i fix this error:
Property ‘props’ does not exist on type ‘GetServerSidePropsResult<{ [key: string]: any; }>’.ts(2339)

in this component:

import { NextPage, GetServerSideProps } from "next";
import HouseCard from "./Cards/HouseCard Responsive";
import { houses } from "@/constants/hot";
import LoadMore from "./LoadMore";

interface House {
  imageURL: string;
  price: number;
  discount?: number;
  name: string;
  capacity: number;
  sold: number;
  tagNames: Record<string, string>;
  tags: Record<string, boolean>;
  categories: string[];
}

const HousesList: NextPage<{ query: any }> = async (context: any) => {
  const {
    props: { houses: houses2, limit },
  } = await getServerSideProps(context);

  return (
    <div className="p-4">
      <div className="flex items-center justify-center mb-4">
        <h2 className="text-lg font-semibold text-center">زمین ها</h2>
      </div>
      {houses2?.length > 0 && (
        <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {houses2.map((house: House, index: number) => (
            <HouseCard key={index} {...house} />
          ))}
        </div>
      )}
      <LoadMore limit={limit} />
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const baseHouses = [...houses];

  const search = context.query?.search as string | undefined;
  const filter = context.query?.filter as string | undefined;
  const shows = context.query?.shows as string | undefined;

  const filteredByName = search
    ? baseHouses.filter(
        (house) =>
          typeof house.name === "string" &&
          house.name.toLowerCase().includes(search.toLowerCase())
      )
    : baseHouses;

  const categories = filter ? filter.split(",") : [];

  const finalFilteredHouses = filteredByName.filter(
    (house) =>
      !categories.length ||
      categories.some((category) => house.categories.includes(category.trim()))
  );
  const limited = finalFilteredHouses.length;
  const showsNumber = shows ? parseInt(shows, 10) : 8;
  const housesToShow = finalFilteredHouses.slice(0, showsNumber);

  return {
    props: {
      houses: housesToShow,
      limit: limited,
    },
  };
};

export default HousesList;

here is its parent component:

import Filters from "@/components/Filters";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import HousesList from "@/components/HousesList";
import { houses } from "@/constants/hot";
import SearchBG from "@/components/SearchBG";
import ScrollableSection from "@/components/ScrollableSection";

interface Props {
  searchParams: { [key: string]: string | undefined };
}
const Home = async ({ searchParams }: Props) => {
  return (
    <div className="light" style={{ height: "100vh", overflow: "auto" }}>
      <Header />
      <div className="Hero" dir="rtl">
        <Hero
          title="زمینه تو"
          subtitle="اخرین جایی که میگردی"
          buttonText="بزن بریم"
          buttonLink="/start"
        />
      </div>

      <div className="relative bg-white  z-30 p-4 rounded-lg shadow-md  border border-gray-300">
        <ScrollableSection
          title="داغ ترین ها"
          houses={houses}
          scrollAmount={200}
          scrollInterval={3000}
          showArrows={true}
          customClass="hot-section"
        />
        <div
          className="w-full flex flex-col items-center min-h-screen"
          style={{ backgroundImage: "url('searchbg.png')" }}
        >
          <SearchBG />
          <div className="flex justify-center">
            <Filters />
          </div>
          <HousesList query={searchParams} />
        </div>
        <ScrollableSection
          title="تازه‌ترین‌ها"
          houses={houses}
          scrollAmount={300}
          scrollInterval={4000}
          showArrows={true}
          customClass="latest-section"
        />{" "}
      </div>
    </div>
  );
};
export default Home;

i dont want change the logic that my houses list must be like this:
const HousesList: NextPage<{ query: any }> = async (context: any) => {

and it must use await getServerSideProps(context); to get the filetred houses and the limit