Better way to uncontrolled components?

Hi, in the documentation for uncontrolled components it is shown that we could use ref to access the values in the form, it is not specified why we shouldn't use this approach instead:

const App = () => {
  const file = useRef()
  const submit = (e) => {
    e.preventDefault()
    const form = new FormData(e.target)
    form.append('archivo', file.current.files[0])
    console.log(Array.from(form))
    // even better:
    Object.fromEntries(Array.from(form))
  }

  return (
    <form onSubmit={submit}>
      <div>
        <span>lala</span>
        <input defaultValue='my value' type='text' name='field' />
        <input type='file' ref={file} />
      </div>
      <input type='submit' value='Enviar' />
    </form>
  )
}

I think it's way cleaner as we only have to focus one one potential value, an input of type file. Is there a reason to not use it?

Comece por content/docs/uncontrolled-components.md, especialmente pela seção que descreve refs e os valores dos formulários, e revise o exemplo vinculado. Esclareça na documentação se a abordagem proposta com FormData e file-ref deve ser usada e por quê; em seguida, verifique se a página apresenta uma recomendação clara para formulários não controlados.