How to fix runtime error with loading the React Hook Form, whilst developing a NextJs13, react, tailwind, shadcn-ui web application?

Question

I am developing a web-application with NextJs13.5.4. Unfortunately a bit stuck atm. The issues just came up after finishing the const routes on my sidebar page and starting my second sidebar label chat assistant page. This page is supposed to be connected to my API of OpenAI. My full page is directed by a template I am following up to build my project. Here is the project I trying to rebuild. https://github.com/AntonioErdeljac/next13-ai-saas/tree/master/app

Here is the side I was rendering, but it doesn't display after finishing the code any of my awaited content. Instead it does only shows me the error page. Looking forward to hear any helpful opinions and solutions.

Here is the error of the page.tsx of that defined non-working labelpage.

Unhandled Runtime ErrorTypeError: methods is null
Call Stack:

    useController node_modules/react-hook-form/dist/index.esm.mjs (395:74)
    Controller node_modules/react-hook-form/dist/index.esm.mjs (543:0)
    renderWithHooks node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10730:0)
    mountIndeterminateComponent node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15768:0)
    beginWork$1 node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (17352:0)
    callCallback node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19465:0)
    invokeGuardedCallbackImpl node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19514:0)
    invokeGuardedCallback node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19589:0)
    beginWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25723:0)
    performUnitOfWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24552:0)
    workLoopConcurrent node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24538:0)
    renderRootConcurrent node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24494:0)
    performConcurrentWorkOnRoot node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23358:0)
    workLoop node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
    flushWork node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
    performWorkUntilDeadline node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

My page content to render:

"use client";

import { Heading } from "@/components/heading";
import { useForm } from "react-hook-form";
import { useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { BotIcon } from "lucide-react";
import { formSchema } from "./constants";
import { FormField } from "@/components/ui/form";
import { FormControl } from "@/components/ui/form";
import { FormItem } from "@/components/ui/form";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { Button } from "@/components/ui/button";

console.log()

interface FormValues {
    prompt: string;
}

const ChatAssistantPage = () => {
    const { handleSubmit, formState } = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: { prompt: "" }
    });

    const isLoading = formState.isSubmitting;

    const onSubmit = async (values: FormValues) => {
        console.log(values);
    };

    return (
        <div>
            <Heading
                title="AI Assistant"
                description="Our most advanced conversation model."
                icon={BotIcon}
                iconColor="text-violet-500"
                bgColor="bg-black-500/10"
            />
            <div className="px-4 lg:px-8">
                <div>
                    <form onSubmit={handleSubmit(onSubmit)} className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2">
                        <FormField
                            name="prompt"
                            render={({ field }) => (
                                <FormItem className="col-span-12 lg:col-span-10">
                                    <FormControl className="m-0 p-0">
                                        <Input
                                            {...field}
                                            className="border-0 outline-none focus-visible:ring-0focus-visible:ring-transparent"
                                            disabled={isLoading}
                                            placeholder="How do I calculate the radius of a circle?"
                                            {...field}
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                        <Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
                            Generate
                        </Button>
                    </form>
                </div>
                <div className="space-4 mt-4">
                    Messages Content
                </div>
            </div>
        </div>
    );
};