Next.jsにてreact-dropzoneを使用してGoogle Cloud Storageにアップロードできない

Question

前提

Typescriptを使用し、ユーザーが適切なファイル・フォルダをreact-dropzone経由でGoogle Cloud Storageにアップロードできる機能を作成しております。

// Upload.tsx
import { FC, useCallback, useState } from 'react';
import { useDropzone, FileWithPath } from 'react-dropzone';
import { getClient } from '@/Infrastructure';
const style = {
    width: 200,
    height: 150,
    border: '1px dotted #888',
};

const upload2CloudStorage = async (files: FileWithPath[]) => {
    if (files) {
        console.log(files);
         //   getClientは独自のfetch関数で、しっかり動きます
        const res = await getClient().post('/api/upload', {
            files,
        });
    }
};
type UploadStatus = 'uploading' | 'completed' | null;

export const Upload: FC = () => {
    const onDrop = useCallback((files: FileWithPath[]) => {
        setUploadStatus('uploading');
        upload2CloudStorage(files);
        setUploadStatus('completed');
    }, []);
    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop,
    });
    const [uploadStatus, setUploadStatus] = useState<UploadStatus>(null);
    const message = (uploadStatus: UploadStatus) => {
        if (uploadStatus == 'uploading') {
            return 'アップロード中';
        } else if (uploadStatus == 'completed') {
            return 'アップロードが完了しました';
        } else if (isDragActive) {
            return 'ここにファイルをドロップしてください';
        } else {
            return "Drag 'n' drop some files here, or click to select files";
        }
    };
    return (
        <div {...getRootProps()} style={style}>
            <input {...getInputProps()} />
            <p>{message(uploadStatus)}</p>
        </div>
    );
};

// apiです
import type { NextApiRequest, NextApiResponse } from 'next';
import { Storage } from '@google-cloud/storage';
import { FileWithPath } from 'react-dropzone';
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse,
) {
    if (req.method == 'POST') {
        // Creates a client
        const { files }: { files: FileWithPath[] } = req.body;
        console.log(files);
        const storage = new Storage({
            projectId: process.env.GCP_PROJECT_ID,
            keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS,
        });
        files.forEach(async file => {
            await storage
                .bucket(process.env.GCLOUD_STORAGE_BUCKET!)
                .upload(URL.createObjectURL(file));
        });
        res.end();
    }
}

発生している問題・エラーメッセージ

1. ユーザーがreact-dropzone経由でファイルをドラッグドロップで落とし、FileWithPathオブジェクトを取得する→できている
2. Google Cloud Storageにアップロードする方法は、ファイルのパスを指定する方法、メモリからアップロードする方法の2つ。ファイルのパスを指定する方法を試す。参考リンク
3. FileWithPathオブジェクトから.pathにてパスを取り出し、実行したものの、なぜかFile not found エラーになる。(取り出したパスは、ローカルホストのルートディレクトリからたどったフルパスではなく、ただのファイル名だった)
4. FileWithPathオブジェクトをそのままjson.stringfyでメモリからアップロードしたが、中身がとれない

このような状況です。適切にアップロードできる方法を教えていただきたいです。