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?

Bắt đầu với content/docs/uncontrolled-components.md, đặc biệt là phần mô tả refs và các giá trị biểu mẫu, rồi xem lại ví dụ được liên kết. Làm rõ trong tài liệu liệu có nên sử dụng cách tiếp cận FormData và file-ref được đề xuất hay không, cũng như lý do, sau đó xác minh rằng trang đưa ra khuyến nghị rõ ràng cho các biểu mẫu không được kiểm soát.