I'm encountering an issue with my Next.js 14 application using react-hook-form and Zod schema validation. The setup includes an external backend, and the form component is client-side. I'm utilizing the handleSubmit function from react-hook-form to trigger validation, but the POST request is unexpectedly sent to the Next.js server itself at

http://localhost:3000/dashboard/challenges

instead of the specified external backend URL. Additionally, it seems that the headers are not being sent with the request.

Code snippet of the handleSubmit function:

const processForm: SubmitHandler<Inputs> = async (data) => {
    setLoading(true);
    const success = await createChallenge(data);
    if (success) {
        // TODO: Toast Message
    } else {
        // TODO: Toast Message
    }
    reset();
    setLoading(false);
    setFormOpen(false);
};

Code snippet of the createChallenge function:

"use server"
import { Inputs } from "@/components/create-challenge.form";
import { revalidatePath } from "next/cache";
import { BACKEND_URL } from "@/lib/constants";
import { getServerSession } from "next-auth";
import { options } from "@/app/api/auth/[...nextauth]/options";

export async function createChallenge(challengeDto: Inputs) {
    const { editingTask, ...challengeData } = challengeDto;
    const session = await getServerSession(options);
    try {
        const response = await fetch(BACKEND_URL + "/challenges", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: session?.tokens.accessToken,
            },
            body: JSON.stringify(challengeData),
        });

        if (response.status !== 201) return false;

        revalidatePath("/challenges");
        return true;
    } catch (err) {
        return false;
    }
}

I appreciate any insights into why the request is not reaching the specified external backend and why the headers are not being included. Thank you!