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?

content/docs/uncontrolled-components.md から始め、特に refs とフォームの値について説明しているセクションを確認し、リンクされた例をレビューしてください。ドキュメント内で、提案されている FormData と file-ref のアプローチを使用すべきかどうか、またその理由を明確にし、そのうえでページに非制御フォームに対する明確な推奨が示されていることを確認してください。