Hey guys im trying to pass zod schema in an object to the client but i keep getting that only plain objects... can e passed to client. i want validation on server, client and its easier to pass schema in the object so i can reuse it for all other objects how can i actually pass it to client without an issue?

import { firstNameSchema, lastNameSchema } from "@/util/validation";
import { ZodSchema } from "zod";

export interface SearchField {
    db: string;
    label: string;
    dataType: string;
    zodValidation: ZodSchema;
}

export type SearchData = Record<string, SearchField>;

export const doctorSearchData = {
    firstName: {
        db: "firstName",
        label: "First Name",
        dataType: "string",
        zodValidation: firstNameSchema,
    },
    lastName: {
        db: "lastName",
        label: "Last name",
        dataType: "string",
        zodValidation: lastNameSchema,
    },
};

page.tsx

import { doctorSearchData } from "@/app/constants/searchData";
const page = async ({ searchParams }: ISearchParamsProps) => {
          return <SearchFilter searchData={doctorSearchData} />
}

SearchFilter.tsx

const SearchFilter = ({ searchData }: SearchFilterProps) => {
    const searchParams = useSearchParams();

return (
<Select defaultValue={Object.keys(searchData)[0]}>
  <SelectTrigger style={{ direction: "rtl" }} className="w-fit rounded-l-none">
    <ListFilter size={16} className="mx-1" />
      <SelectValue placeholder={Object.keys(searchData)[0]} />
      <span className="w-[10px]"></span>
  </SelectTrigger>
  <SelectContent style={{ direction: "rtl" }}>
    {Object.keys(searchData).map((param, index) => (
      <SelectItem key={index + param} value={param}>
        {searchData[param].label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>
)