client

const { isPending, mutateAsync } = useMutation({
        mutationFn: async (body) => {
            const res = await fetch(
                process.env.NEXT_PUBLIC_FRONTEND_URL + "/api/poets",
                {
                    method: "POST",
                    body,
                }
            );

            return await res.json();
        },
    });

    const onSubmit = async (data) => {
        const { name, surname, profile_image } = data;
        const formData = new FormData();
        formData.append("name", name);
        formData.append("surname", surname);
        formData.append("profile_image", profile_image);
        const result = await mutateAsync(formData);

        console.log(result);
    };

server(route handler)
http://localhost:3000/api/poets

import { NextResponse } from "next/server";

export async function POST(request) {
    const formData = await request.formData();

    const res = await fetch(`${process.env.API_URL}/poets`, {
        method: "POST",
        body: formData,
    });

    const result = await res.json();

    return NextResponse.json(result);
}

What am I doing wrong when sending data?

add-poet-form.jsx:32
POST http://localhost:3000/api/poets 500 (Internal Server Error)

VM578:1 Uncaught (in promise)
SyntaxError: Unexpected end of JSON input
at Object.mutationFn (add-poet-form.jsx:40:21)