InertiaJs file Upload error!

I am using the useForm() helper function for forms. While using the documented code for file upload I am unable to preserve the state while selecting an image and the page crashed with the following error in console:

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

The code is given below and is same as the inertia docs:

import { useForm } from '@inertiajs/inertia-react'

`import React from 'react'
import { useForm } from '@inertiajs/inertia-react'

export default function Test(props) {
const { data, setData, post, progress } = useForm({
  name: null,
  avatar: null,
})

function submit(e) {
  e.preventDefault()
  post('/users')
}

return (
  <form onSubmit={submit}>
    <input type="text" value={data.name} onChange={e => setData('name', e.target.value)} />
    <input type="file" value={data.avatar} onChange={e => setData('avatar', e.target.files[0])} />
    {progress && (
      <progress value={progress.percentage} max="100">
        {progress.percentage}%
      </progress>
    )}
    <button type="submit">Submit</button>
  </form>
)
}```