I am using uploadthing, react form hook, and server actions for uploading/deleting files.

I called server action:

"use server";
export async function updateDoorContent(fileData, data, door) {
  "use server";
  ...
  const file = fileData.get("file");
  const isFileUpdate = data.isFileUpdate;
  const ogImageFileKey = door.contentImage.fileKey;
  ...
  if (deleteOgFile) {
    await utapi.deleteFiles(ogImageFileKey);
    await Door.findByIdAndUpdate(...);
  }
  if (isFileUpdate) {
    const { data } = await utapi.uploadFiles(file);
    await Door.findByIdAndUpdate(doorId, {...},
    });
  }

inside a client component:

"use client";
import { updateDoorContent } from "/app/_actions";
export default function EditContentForm({ door }) {
  ...
  const processData = async (data) => {
    const fileData = new FormData();
    fileData.append("file", data.file); 
    const imageResponse = await updateDoorContent(fileData, data, door);
  };
  ...
  return (
    <form ref={formRef} onSubmit={handleSubmit(processData)}>
         ...

I got this error when I deleted files:

Error updating door content: Error: Failed to delete files
    at Object.deleteFiles (/var/task/.next/server/chunks/9937.js:17336:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async updateDoorContent (/var/task/.next/server/app/edit/)

And this when I uploaded files:

Error updating door content: Promise {
  <rejected> TypeError: Body is unusable
      at specConsumeBody (node:internal/deps/undici/undici:6630:15)
      at Response.json (node:internal/deps/undici/undici:6533:18)
      at UploadThingError.fromResponse (/var/task/.next/server/chunks/9937.js:16521:37)
      at uploadFilesInternal (/var/task/.next/server/chunks/9937.js:17195:81)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

The code worked fine locally but gave me errors once deployed to Vercel. Was wondering if I misused server actions.