I want to authenticate the user and redirect them to the home page after. When I submit this form redux state is being set, but the user is not redirected to the home page on first submit; I have to submit twice or sometimes three times for it to properly redirect me to the home page.

Any ideas as to what I may be doing wrong?

async function login(e) {
  e.preventDefault()
  const response = await axios.post("http://localhost:3001/login", {
    email,
    password
  }, {
    withCredentials: true
  })
  if (response.data.auth) {
    history.push("/")
    store.dispatch({
      type: "setUser",
      payload: response.data
    })
  }
}

Here is my code for the login form.

<form className="login_form" onSubmit={(e)=> login(e)}>
  <label>Email</label>
  <input type="text" onChange={e=> setEmail(e.target.value)} required placeholder="enter your email"/>
  <label>Password</label>
  <input type="password" onChange={e=> setPassword(e.target.value)} required placeholder="enter your password"/>
  <div className="login_btn_div">
    <button className="route_to_register_btn" onClick={()=> history.push("/register")} type="button">Create account</button>
    <button className="login_submit_btn" type="submit">Sign in</button>
  </div>
</form>

Here I initialize history in its own file and pass it to the root component as a prop.

const createHistory = require("history").createBrowserHistory 
export default createHistory();