Why does console always returned Runtime Error 'Unsupported body payload object' when trying to upload a file to S3?

I am creating a nextjs web app and I'm trying to upload a file to s3, but an error is always returned in the chrome console saying unsupported body payload object. Im using 'next-s3-upload' and I tried to extract the file from an array which was passed in from my parent component. Have a look at my code below and the error below it and see what I was doing wrong. Im a newbie please be patient with me. Thank you in advance!

import styles from '../../../styles/submit.module.css'
import Head from 'next/head'
import Image from 'next/image'
import axios from 'axios'
import {useRouter} from 'next/router'
import {useState} from 'react'
import {useEffect} from 'react'
import { useS3Upload } from 'next-s3-upload';

const submit = ({oncont, jobarray, setjob, submitting, submittingfunction}) =>{

let [fileUrl, setFileUrl] = useState();
let { uploadToS3 } = useS3Upload();

const router = useRouter();
const [uploaded, setuploadstatus] = useState(false); //this state will be used to keep track of the upload and display loader and check matk.
const [submitjob, setsubmitjob] = useState(false);

const sleep = (ms)=>{
  return new Promise(resolve => setTimeout(resolve, ms));
} //this function is a sleep function to call when you want the app to slee. it is used for debbuging


var file = jobarray.joblisting;


useEffect(() => {
  window.scrollTo(0, 0)
}, [])

const submit =  (e) =>{

  setsubmitjob(true);

  let { url } = uploadToS3(file);
  
  setFileUrl(url);
  console.log(fileUrl)

  createjoblist();
} //this function is trigered by submit button and will upload the job array to database.

const validator = (e) =>{
    const jobdate = new Date();
    setjob({
      ...jobarray, [e.target.name]: jobdate
    })
}


// console.log(jobarray)
const createjoblist = async () =>{
  // console.log("before encoding, the listing is "+ jobarray)

  try {
    const res = await axios.post("http://localhost:3000/api/job", jobarray);
    setuploadstatus(true);
    sleep(3500).then(() => {
      router.push("/");
    })
  } catch (e) {
    console.log("Connection to server failed. Please try again in a minute")
  }
}

  return(
    <div className={styles.container}>
      {!submitjob
      ?<>
        <div className={styles.submitmodal}>
        <p>To submit job, type <b>submit</b></p>
        <input className={styles.input} name="timeposted" onChange={validator}/>
        <button className={styles.continuebutton} onClick={submit}>Submit Job</button>
      </div>
      </>
      :<div className={styles.divloader}>
        {!uploaded
          ?<div className={styles.divloader}>
            <input type="checkbox" id="check"/>
            <label>
               <div className={styles.checkicon}></div>
          </label>
          </div>

          :<div className={styles.divloader2}>
            <input type="checkbox" id="check"/>
            <label htmlFor="check">
               <div className={styles.checkicon}></div>
            </label>
          </div>
        }
      </div>
    }
    </div>
  );
}

export default submit;

this is the console error

Unhandled Runtime Error
Error: Unsupported body payload object

Call Stack
ManagedUpload.self.fillQueue
node_modules\aws-sdk\lib\s3\managed_upload.js (92:0)
ManagedUpload.send
node_modules\aws-sdk\lib\s3\managed_upload.js (201:0)
eval
node_modules\aws-sdk\lib\util.js (839:0)
new Promise
<anonymous>
ManagedUpload.promise
node_modules\aws-sdk\lib\util.js (831:0)
_callee$
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (1032:0)
tryCatch
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (124:0)
Generator.invoke [as _invoke]
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (338:0)
Generator.eval [as next]
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (176:0)
asyncGeneratorStep
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (8:0)
_next
node_modules\next-s3-upload\dist\next-s3-upload.esm.js (30:0)