Which is the correct way to handle Form submission in React?

In the React documentation and a bunch of examples in various projects, form submission is handled in this manner:

const FormComponent = () => {
  const [val, setVal] = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = (e) => {
    e.preventDefault();

    console.log(val);
    // handle submit logic using "val"
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={val} onChange={onChange} />
      <input type="submit" value="Submit" />
    </form>
  )
}

While in other places I've seen code like this

const FormComponent = () => {
  const [val, setVal] = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = () => {
    console.log(val)
    // handle submit logic using "val"
  }

  return (
    <div>
      <input type="text" value={val} onChange={onChange} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  )
}

They both seem to achieve exactly the same thing. Which is the better way of doing it?