title: Form onChange working, however fails to work when I change it to onSubmit?
body: <p>I've been stuck trying to figure this out for ages. For some reason when the inputs onSubmit is set to onChange, it fires correctly. However I need it to be onSubmit, as I don't want it firing on every change. Does anyone know what I'm doing wrong and why the onSubmit isn't working for the input. I'm trying to set the state and update the URL query for something like:</p>
  
  <p>"website.com/browse?country={text from input}"  </p>
  
  <pre><code>const [countryQuery, setCountryQuery] = useQueryState("country", "")
  
  const handleSubmitCountry = (e) =&gt; {
      e.preventDefault()
      setCountryQuery()
  }
  
  &lt;form onSubmit={handleSubmitCountry}&gt;
      &lt;input 
          placeholder={countryQuery}
          type="text" 
          className={styles.searchInput}
          onSubmit={e =&gt; setCountryQuery(e.target.value)} 
      /&gt;      
  &lt;/form&gt;
  </code></pre>