pass a data to next page with dynamic routing in next Js 13?

In my Next Js 13 app i’m using dynamic routing. and in the first screen i’m fetching the data from server and storing it in an array. so whenever the user selects an item it will redirect them to a detail page. so my question is how can i pass the selected item list to the next page along with dynamic routing?

home page

 {house.images.map((img, index) => {
          return (
            <Link
              href={{
                pathname: `/living/${house.id}`,
                query: { house: house },
              }}
              key={index}
            >
              <div
                key={index}
                className=" w-full relative -z-10 pt-[100%] cursor-pointer"
              >
                <Image
                  src={img}
                  alt="profile"
                  fill
                  className="w-full h-full top-0 left-0 -z-10 object-cover rounded-2xl ease-in-out duration-200"
                />
              </div>
            </Link>
          );
        })}

and detail page

function DetailPage({ params: { homeid } }) {
  const router = useRouter();
  const { house } = router.query;
  //... the rest of the code
}

and this displays an error b/c i’m using next/router.