How to fix 'error - unhandledRejection: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined'

I have a task for uploading images using Next js. API for image uploading has been given and it exists in the same project and when it becomes successful images are stored in a separate directory. API for image uploading is as follows,

import formidable from "formidable";
import path from "path";
import { renameSync } from "fs";

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function upload(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  const form = new formidable.IncomingForm({
    keepExtensions: true,
    maxFileSize: 200 * 1024 * 1024,
  });

  return new Promise((resolve, reject) => {
    form.parse(req, async (err, fields, files) => {
      if (err) {
        res.status(500).json({ error: err.message });
        return resolve();
      }

      if (!files.image) {
        res.status(422).json({ error: "Bad request: missing image field" });
        return resolve();
      }

      const ext = path.extname(files.image.path);
      const uuid = Math.random().toString(26).slice(2);
      await renameSync(files.image.path, `./public/images/${uuid}${ext}`);

      res.status(201).json({
        uuid,
        url: `/images/${uuid}${ext}`,
      });
      return resolve();
    });
  });
}

Code for the front-end is mentioned below,

import React from "react";

export default function UploadImage() {
const [imgsSrc, setImgsSrc] = React.useState([]);

const uploadToClient = (e) => {
    for (const file of e.target.files) {
        setImgsSrc((imgs) => [...imgs, file]);
    }
};

const uploadToServer = async () => {
    let formData = new FormData();
    for (const file of imgsSrc) {
        formData.append('image', file, file.name)
    }    
    const response = await fetch("/api/upload", {
        method: "POST",
        body: formData
    });
};

return(
  <div>
    <h3>Upload photos</h3>
    <input onChange={uploadToClient} type="file" name="file" multiple />

    <div>
      {imgsSrc.map((link) => (
         <img src={link} style={{ width: 200, height: 200 }} />
      ))}
    </div>
    <button type="submit" onClick={uploadToServer}>Send to server</button>
  </div>
    )
}

When uploading images I am getting 'error - unhandledRejection: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined'. Any suggestion would be highly appreciated!