I get an error when sending form data with route handlers. How can I send the image file?

client

"use client";

import { addPoetFormValidation } from "@/validations/add-poet-form-validation";
import { yupResolver } from "@hookform/resolvers/yup";
import {
    Button,
    FileInput,
    Group,
    Modal,
    Stack,
    TextInput,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconUserPlus } from "@tabler/icons-react";
import { useMutation } from "@tanstack/react-query";
import { Controller, useForm } from "react-hook-form";

export default function AddPoetForm() {
    const [opened, { open, close }] = useDisclosure(false);

    const {
        register,
        control,
        handleSubmit,
        formState: { errors },
    } = useForm({
        resolver: yupResolver(addPoetFormValidation),
    });

    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);
    };

    return (
        <>
            <Modal
                opened={opened}
                title="Yeni şair oluştur"
                centered
                closeOnClickOutside={false}
                withCloseButton={false}
            >
                <form onSubmit={handleSubmit(onSubmit)}>
                    <Stack
                        justify="space-between"
                        gap="xl"
                    >
                        <Stack>
                            <Group grow>
                                <TextInput
                                    label="Ad"
                                    placeholder="Ad giriniz"
                                    {...register("name")}
                                    error={errors.name?.message}
                                />
                                <TextInput
                                    label="Soyad"
                                    placeholder="Soyad giriniz"
                                    {...register("surname")}
                                    error={errors.surname?.message}
                                />
                            </Group>
                            <Controller
                                name="profile_image"
                                control={control}
                                render={({ field }) => (
                                    <FileInput
                                        {...field}
                                        accept="image/png,image/jpeg,image/jpg"
                                        label="Şair Resmi"
                                        description="Resim boyutu maksimum 8 MB olmalıdır"
                                        placeholder="Resmi yüklemek için tıklayın"
                                        error={errors.profile_image?.message}
                                    />
                                )}
                            />
                        </Stack>

                        <Group
                            justify="space-between"
                            align="center"
                            grow
                        >
                            <Button
                                variant="default"
                                onClick={close}
                            >
                                Kapat
                            </Button>
                            <Button
                                color="dark"
                                type="submit"
                                loading={isPending}
                                loaderProps={{ type: "oval" }}
                            >
                                Yeni şair ekle
                            </Button>
                        </Group>
                    </Stack>
                </form>
            </Modal>
            {/* Modal Target */}
            <Button
                onClick={open}
                variant="default"
                leftSection={<IconUserPlus />}
            >
                Yeni şair ekle
            </Button>
        </>
    );
}

server

api/poets/route.js

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);
}

POST http://localhost:3000/api/poets 500 (Internal Server Error)
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at Object.mutationFn (add-poet-form.jsx:40:21)

I get this error when I send the request.

How can I upload files with route handlers? Unfortunately I get errors with these codes.