How do I actually use tRPC without using a server component

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Input } from "@/app/_components/ui/input"
import { useToast } from "@/app/_components/ui/use-toast"
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";

export default async function ProfileForm() {
    const { toast } = useToast()

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
    })

    async function onSubmit(data: z.infer<typeof formSchema>) {
        console.log(data)
        toast({
            title: "Form submitted!",
            description: "Friday, February 10, 2023 at 5:57 PM",
        })
        await api.onboarding.form.mutate({ name: data.username })
    }
    return (
        (deteted the data here)
    )
}

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Input } from "@/app/_components/ui/input"
import { useToast } from "@/app/_components/ui/use-toast"
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";

export default async function ProfileForm() {
    const { toast } = useToast()

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
    })

    async function onSubmit(data: z.infer<typeof formSchema>) {
        console.log(data)
        toast({
            title: "Form submitted!",
            description: "Friday, February 10, 2023 at 5:57 PM",
        })
        await api.onboarding.form.mutate({ name: data.username })
    }
    return (
        (deteted the data here)
    )
}