I am trying to do a multi part upload to AWS S3 from my React.JS front end with aws amplify.

Using Ionic v5 framework.

I need to upload up to 150 images at a time.

I have aws amplify configured in my config file and index file.

I keep getting an error: Error: Unsupported body payload object

What would be the cause of this?

import React, { useState, useEffect, useRef } from "react";
import { IonButton, IonButtons, IonInput, IonBackButton, IonContent, IonHeader, IonList, IonItem, IonItemGroup, IonLoading, IonItemDivider, IonLabel, IonPage, IonTitle, IonToolbar, IonAlert, IonRadio, IonRadioGroup, IonListHeader, IonSlide, IonSlides, IonIcon } from '@ionic/react';
import { LinkContainer } from "react-router-bootstrap";
import { API, Storage } from "aws-amplify";

function JobInfo(props) {

const file = useRef(null);

  function handleFileChange(event) {
    file.current = event.target.files[0];
  }


    async function handleSubmit(event) {
          event.preventDefault();

         setShowLoading(true);

        try {
    const attachment = file.current
    const filename = `${job.JobId}-${file.name}`;

  const stored = await Storage.put(filename, file, {
    contentType: file.type
  });

  return stored.key;

  } catch (e) {
    alert(e);

  }
 setShowLoading(false);
}


  var centerText = {textAlign: "center"}
  let today = new Date().toDateString();
  let start = new Date(date).toDateString();
  return(
      <IonPage>
      <IonHeader>
        <IonToolbar>
      <IonButtons slot="start">
          <IonBackButton/>
      </IonButtons>
          <IonTitle>Upload Images</IonTitle>
        </IonToolbar>
      </IonHeader>  
      <IonContent className="ion-padding">

      <div style={{display: "flex", justifyContent: 'center'}}>
          <IonItem>
          <IonInput name="file" multiple="true" id="file" type="file" onIonChange={(e) => handleFileChange}></IonInput>
          </IonItem>
          <IonButton  expand="block" color="primary" strong="true" size="default" type="submit" onClick={handleSubmit} >Upload</IonButton>
       </div>
           <IonLoading
               isOpen={showLoading}
               onDidDismiss={() => setShowLoading(false)}
               message={'Please Wait...'}
               duration={6000}
            />

    </IonContent>
    </IonPage>
    );