I am trying to implement a super simple, super primitive authentication page for my website. The user sees just a single input field and a submit button. If the input matches the password (hashing remains to be added) the user is authenticated.

The problem is, however, that you always have to input the correct string and press the submit button twice. I don't know why this is happening, and it is obviously quite annoying.

Is there any solution for this? All I've found is to use e.preventDefault(), which I am already using, but to no avail.

import { useState } from 'react'
import App from '../App'

export default function Password() {
  const [auth, setAuth] = useState(false)
  const [pass, setPass] = useState("")
  const secret = ""

  const handleChange = e => {
    setPass(e.target.value)
  }

  const handleSubmit = e => {
    e.preventDefault()
    e.nativeEvent.stopImmediatePropagation();
    if (pass === secret) {
      setAuth(true)
    }
  }

  if (auth) {
    return (
      <App/>
    )
  } else {
    return (
      <form onSubmit={handleSubmit}>
        <input style={{ border: "1px solid grey", borderRadius: "4px" }} type="text" value={pass} onChange={handleChange} />
        <input style={{ border: "1px solid grey", borderRadius: "4px" }} type="submit" value="submit" />
      </form>
    )
  }
  
}