Cannot retrieve formdata after Axios post

My NextJS app is sending a formdata from the client to the backend in .pages/api. The app is using Axios and sending a Formdata.

When logging the data received in the page/api/middleware.js, they are undefined.

In the client I have a valid formdata being sent:

// ./index.js
 uploadFile = async (base64) => {
    try {
      const formData = new FormData()
      formData.append('name', 'myName')
      formData.append('description', 'myDescription')
      formData.append('file', base64)
      const { data } = await axios.post('/api/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }})

      return true
  
    } catch (ex) {
      console.error(ex)
      return null
    }
  }

In .pages/api the data are received in a middleware like so:

// ./pages/api/middleware.js
middleware.use((req, res, next) => {
  const form = new multiparty.Form()

  console.log(req.body) // undefined
  console.log(req.files) // undefined

  form.parse(req, function (err, fields, files) {
    if (err) {
      console.log(err)
    }
    req.body = fields 
    req.files = files
    console.log(fields) // {"undefined":["[object Promise]"]}
    console.log(files) // {}
    next()
  })
)}

As seen in the snippet, i receive undefined data in the backend. What is wrong with this code?