unable to setup RQ in next.js project

import { Navbar } from "@/components/Navbar";
import { Chart1 } from "@/components/Chart1";
import { Chart2 } from "@/components/Chart2";
import { useQuery } from "@tanstack/react-query";


export default function Home() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ["twitterData"],
    queryFn: async () => {
      const response = await fetch("/api/twitter");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
  });
  if (isPending) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }
  return (
    <div>
      <div className="text-center m-2 text-2xl font-bold font-mono md:p-6 md:m-6 ">
        <Navbar />
      </div>
      <div className="font-bold m-4 p-4 gap-3 grid grid-cols-1 md:grid-cols-2 text-2xl bg-black pt-8 mt-8">
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart1 />
        </div>
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart2 />
        </div>
        <div className="text-white">
          <h1>Twitter Search Results</h1>
          <ul>
            {data.map((todo: any) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

import { Navbar } from "@/components/Navbar";
import { Chart1 } from "@/components/Chart1";
import { Chart2 } from "@/components/Chart2";
import { useQuery } from "@tanstack/react-query";


export default function Home() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ["twitterData"],
    queryFn: async () => {
      const response = await fetch("/api/twitter");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
  });
  if (isPending) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }
  return (
    <div>
      <div className="text-center m-2 text-2xl font-bold font-mono md:p-6 md:m-6 ">
        <Navbar />
      </div>
      <div className="font-bold m-4 p-4 gap-3 grid grid-cols-1 md:grid-cols-2 text-2xl bg-black pt-8 mt-8">
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart1 />
        </div>
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart2 />
        </div>
        <div className="text-white">
          <h1>Twitter Search Results</h1>
          <ul>
            {data.map((todo: any) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

Unhandled Runtime 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.

Unhandled Runtime 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.