I am encountering an error when wrapping the App.ts with queryclientprovider: "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." Below is the code snippet from App.ts:

 import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { UserButton,auth } from '@clerk/nextjs'
import Link from 'next/link';
import {LogIn } from 'lucide-react';
import FileUpload from '@/components/FileUpload';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";



export default async function Home() {

  const queryClient = new QueryClient();
  const {userId}=await auth();
  const isAuth=!!userId
  return (
    <QueryClientProvider client={queryClient}>
    <div className='w-screen min-h-screen bg-gradient-to-b from-black via-black to-sky-900'>
      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white'>
         <div className="flex flex-col items-center text-center">
          <div className="flex items-center"> 
          <h1 className='mr-3 text-5xl font-bold-sans md:font-serif  bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400 '>Chat With Any PDF</h1>
          <UserButton afterSignOutUrl='/'/>
          </div>
          <div className="flex mt-2">
            {isAuth &&
          <Button className=' mb-2 bg-gradient-to-r  from-black via-black to-sky-900 border-2 border-gray-300 border-r-2  hover:bg-gradient-to-l  hover:transition hover:duration-300   '>Go to Chats</Button>}
          </div>
          <p className='  mt-1   md:font-serif  bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400 '>Script.Ai is a cutting-edge web application designed to streamline your PDF interactions. Simply upload your documents and effortlessly extract answers to your questions, harnessing the power of advanced AI technology for precision and efficiency.</p>
          <div className='w-full mt-4'>
          
   
            {isAuth ? (<FileUpload/>):<Link href={'/sign-in'} >
          

            <Button  className=' bg-gradient-to-r from-black via-black to-sky-900  text-gray-300 border-2 border-gray-300  hover:bg-gradient-to-l  hover:transition hover:duration-300 hover:ease-in-out'>Login to get Started
            <LogIn className='w-4 h-4 ml-2 '/></Button>
            </Link> }
          </div>
          
         </div>
      </div>
    </div>
  </QueryClientProvider>
  )
}

and the code of FileUpload.ts, where I used queryclient due to the use of "useMutation":

"use client";
import { uploadToS3 } from "@/lib/s3";
import { useMutation } from "@tanstack/react-query";
import { Inbox, Loader2 } from "lucide-react";
import React from "react";
import { useDropzone } from "react-dropzone";
import axios from "axios";
import { toast } from "react-hot-toast";
import { useRouter } from "next/navigation";

// https://github.com/aws/aws-sdk-js-v3/issues/4126

const FileUpload = () => {
  const router = useRouter();
  const [uploading, setUploading] = React.useState(false);
  const { mutate, isPending } = useMutation({
    mutationFn: async ({
      file_key,
      file_name,
    }: {
      file_key: string;
      file_name: string;
    }) => {
      const response = await axios.post("/api/create-chat", {
        file_key,
        file_name,
      });
      return response.data;
    },
  });

  const { getRootProps, getInputProps } = useDropzone({
    accept: { "application/pdf": [".pdf"] },
    maxFiles: 1,
    onDrop: async (acceptedFiles) => {
      const file = acceptedFiles[0];
      if (file.size > 10 * 1024 * 1024) {
        // bigger than 10mb!
        toast.error("File too large");
        return;
      }

      try {
        setUploading(true);
        const data = await uploadToS3(file);
        console.log("meow", data);
        if (!data?.file_key || !data.file_name) {
          toast.error("Something went wrong");
          return;
        }
        mutate(data, {
          onSuccess: ({ chat_id }) => {
            toast.success("Chat created!");
            router.push(`/chat/${chat_id}`);
          },
          onError: (err) => {
            toast.error("Error creating chat");
            console.error(err);
          },
        });
      } catch (error) {
        console.log(error);
      } finally {
        setUploading(false);
      }
    },
  });
  return (
    <div className="p-2 bg-white rounded-xl">
      <div
        {...getRootProps({
          className:
            "border-dashed border-2 rounded-xl cursor-pointer bg-gray-50 py-8 flex justify-center items-center flex-col",
        })}
      >
        <input {...getInputProps()} />
        {uploading || isPending ? (
          <>
            {/* loading state */}
            <Loader2 className="h-10 w-10 text-blue-500 animate-spin" />
            <p className="mt-2 text-sm text-slate-400">
              Spilling Tea to GPT...
            </p>
          </>
        ) : (
          <>
            <Inbox className="w-10 h-10 text-blue-500" />
            <p className="mt-2 text-sm text-slate-400">Drop PDF Here</p>
          </>
        )}
      </div>
    </div>
  );
};

export default FileUpload;

I need assistance in resolving this error.