Javascript on client side: how to upload a zip file to AWS S3 bucket through pre-signed URL?

Question

My web allows user to drag and drop a zip file and upload it to AWS S3 bucket. The steps are:

1. User drag-and-drops a zip file to the drop-zone of the UI;
2. User clicks send;
3. A request is made to AWS Lambda function and the function will generate a pre-signed URL that allows the user to upload any file.
4. An axios PUT request is made to the pre-signed S3 URL to upload the file.

I used local node.js code to test the pre-signed S3 URL:

  const fileToUpload = fs.readFileSync(test_file_path);
  console.log("fileToUpload: type: ", typeof fileToUpload, ", content: ", fileToUpload);

  try {
    const uploadResponse = await axios({
      method: 'PUT',
      url: presignedUrl,
      data: fileToUpload,
      headers: {
        'Content-Type': '',
      },
      maxContentLength: Infinity,
      maxBodyLength: Infinity
    });
    return uploadResponse.data;
  } catch (error) {
    console.error('Error while uploading object to S3:', error.message);
  }  

And it works well, which proves that the generated pre-signed URL is valid.

However, on client side Reactjs:

    console.log(`formState.file: type: ${formState.file}, content: ${formState.file}`);
    const uploadResponse = await axios({
      method: 'PUT',
      url: presignedS3Url,
      data: formState.file, 
      headers: {
        'Content-Type': ''
      },
      maxContentLength: Infinity,
      maxBodyLength: Infinity
    });

It fails and the request ends in a 403 forbidden error.

The difference is that in nodejs code, the fileToUpload is:

type: object,  content:  <Buffer 50 4b 03 04 14 00 08 00 08 00 78 84 cb 50 00 00 00 00 00 00 00 00 24 ae 12 01 3e 00 20 00 31 2e 32 2e 38 34 30 2e 31 31 33 35 36 34 2e 31 30 2e 31 2e ... 10573784 more bytes>

Whereas in client side, the formState.file is initialized by react-dropzone lib and has the type: formState.file: type: [object File] and its content is:

path: "1.2.840.113564.10.1.312260962047571814316520322884140128208155.zip"
lastModified: 1625164188712
lastModifiedDate: Fri Jul 02 2021 03:29:48 GMT+0900 (Japan Standard Time) {}
name: "1.2.840.113564.10.1.312260962047571814316520322884140128208155.zip"
size: 10573834
type: "application/zip"
webkitRelativePath: ""
[[Prototype]]: File
length: 1

I am not entirely sure that this is the cause. A few thoughts:

1. fs.readFileSync() is nodejs only, and it is not available in client side Reactjs.

2. On client side, should I get the zip file in the form of <Buffer ....> and how should I do it?

3. Or is it ok with the current [object File] type on client side? maybe there is another way to upload it to S3 bucket?