How to connect react-hook-form with react redux to catch server responses

Question

I'm trying to send a post request to log in using Axios, my problem is I'm unable to get the JSON response from the backed. I'm using DRF for at backend, now if I make a successful request I can redirect it but if the request is bad like incorrect input details then I want to display the actual response from the server. which is not happening now. I can see I haven't implemented to catch the errors but I'm not very sure how to connect it with redux as React Hook Forms Doesn't give detailed documentation on that. So if anyone can tell me how to catch the server response or any other quick way to set up this form.

Login Form

const Login = ({  history }) => {
 
  const data = localStorage.getItem("userData")
 
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      email: '',
      password: ''
    }
  })

  const dispatch = useDispatch()
  const onSubmit = data => dispatch(login(data.email, data.password)) // I'm assuming there could be any way to put the logic to catch errors ??
  useEffect(() => {
    if (data) {
      history.push("/profile")
    } 
   })
  return (
    <div className='auth-wrapper auth-v1 px-2'>
      <div className='auth-inner py-2'>
        <Card className='mb-0'>
          <CardBody>
            <CardTitle tag='h4' className='mb-1'>
              Welcome to *****
            </CardTitle>
            <CardText className='mb-2'>Please sign-in to your account and start the adventure!</CardText>
            
            <Form className='auth-login-form mt-2' onSubmit={handleSubmit(onSubmit)}>
             <Label> Email </Label>
             <div>{errors.email?.type === 'required' && "Email is Required"}</div>
              
            <Controller
              name="email"
              control={control}
              rules={{ required: true }}
              render={({ field }) => <Input type ="email"{...field} />}
            />
            
             <Label> Password </Label>
            <Controller
              name="password"
              type="password"
              control={control}
              rules={{ required: true }}
              render={({ field }) => <Input  type="password" {...field} />}
            />
            {errors.password && "Password is Required"}
            <Label>  </Label>
            <Col className='d-grid mb-0 mb-lg-1' lg={6} md={12} size='lg'>
            <Button.Ripple color='primary' type="submit" >Sign In</Button.Ripple> </Col>
          </Form>
            <p className='text-center mt-2'>
              <span className='mr-25'>New on our platform?</span>
                <a href='#'>Request for a BETA access</a>
            </p>
          </CardBody>
        </Card>
      </div>
    </div>
  )
}

export default Login

EDIT : That action is making a post request but it can catch errors but not sure how to plug it with the form.

export const login = (email, password) => async (dispatch) => {
  try {
    dispatch({
      type: USER_LOGIN_REQUEST
    })

    const config = {
      headers: {
        "Content-type": "application/json"
      }
    }

    const { data } = await axios.post(
      "/api/v1/accounts/login/",
      { email, password },
      config
    )

    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data
    })

    localStorage.setItem("userData", JSON.stringify(data))
  } catch (error) {
    dispatch({
      type: USER_LOGIN_FAIL,
      payload:
        error.response && error.response.data.detail
          ? error.response.data.detail
          : error.message
    })
  }
}