Calling server action using useQuery?

'use client';
import { useQuery } from '@tanstack/react-query';

export const runtime = 'edge';

export async function getCustomer(userId: string): Promise<any> {
  "use server";
  const customerInfo = (
    await db
      .select()
      .from(customerTable)
      .where(eq(customerTable.userId, userId))
  )[0];

  return Response.json(customerInfo);
}

export default function Page({ params }: { params: { userId: string } }) {
  const { data } = useQuery({
    queryKey: ['publicCustomer', userId],
    queryFn: async () => {
      const response = await getCustomer(params.userId);
      const data = await response.json();
      return data;
    },
  });

  return (
    <div>{data}</div>
  );
}

'use client';
import { useQuery } from '@tanstack/react-query';

export const runtime = 'edge';

export async function getCustomer(userId: string): Promise<any> {
  "use server";
  const customerInfo = (
    await db
      .select()
      .from(customerTable)
      .where(eq(customerTable.userId, userId))
  )[0];

  return Response.json(customerInfo);
}

export default function Page({ params }: { params: { userId: string } }) {
  const { data } = useQuery({
    queryKey: ['publicCustomer', userId],
    queryFn: async () => {
      const response = await getCustomer(params.userId);
      const data = await response.json();
      return data;
    },
  });

  return (
    <div>{data}</div>
  );
}

⨯ Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

⨯ Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.