I am creating a login form using React Hooks and querying the backend using Axios. On successful login I am redirecting to the home page which is working. The problem is on unsuccessful attempt, I want to set the loginFailed to true and do the conditional rendering on the form based on this. **But unfortunately setLoginFailed is not working.**

This is what I am doing on the client side:

```
import React, { useState } from "react"
import { useForm } from "react-hook-form"
import { useHistory } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers'
import * as yup from "yup"
import axios from 'axios'
import './Login.css'

const schema = yup.object().shape({
  username: yup.string().required("Please enter Username."),
  password: yup.string().required("Please enter Password.")
})

export default function Login() {

  const [loginFailed, setLoginFailed] = useState(null);

  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema)
  })

  const history = useHistory();

  const onSubmit = data => {
    axios.post('/login', data)
    .then((response) => {
      if (response.data.success) {
        history.push("/")
      } else {
        setLoginFailed(true)
      }
    })
  }

  return (

    <form className="login-form" onSubmit={handleSubmit(onSubmit)}>

      {loginFailed && <p>Invalid Username/Password.</p>}

      <input type="text" name="mobile" placeholder="Mobile Number" ref={register} />
      <p className="error">{errors.mobile?.message}</p>

      <input type="password" name="password" placeholder="Password" ref={register} />
      <p className="error">{errors.password?.message}</p>

      <input type="submit" value="Login" />
    </form>
  )
}

```

And this on the server side:

```
var express = require('express')
var router = express.Router()
var passport = require('passport')
var Farmer = require('../models/farmer')

router.post('/login', function(req, res, next) {
  console.log(req.body)
  passport.authenticate('local', function(err, user, info) {
    if (err) { 
      return res.json({success: false}) 
    }
    if (!user) { 
      return res.json({success: false}) 
    }
    req.logIn(user, function(err) {
      if (err) { 
        return res.json({success: false}) 
      }
      return res.json({success: true})
    })
  })(req, res, next)
})

module.exports = router

```

What am I doing wrong? How can I set my state on the client side properly?