Currently, I'm trying to create a login and for some reason my code for my login is not being triggered. The function loginUserWithEmail is not being triggered. It is not being triggered because none of the console.log's inside the loginUserWithEmail function is printed in the console. The onSubmit() function in Login.tsx is triggers when I click a "Login" button.

Thank you.

Login.tsx:

import { useFormik } from 'formik';
import { loginUserWithEmail, LoginFormData } from '../../actions/authActions'

const Login = ({ auth, history, login }: {auth: any, history: RouteComponentProps['history'], login: any}) => {
const formik = useFormik({
initialValues: {
    email: '',
    password: '',
},
validationSchema: loginSchema,
    onSubmit: (values: LoginFormData) => {
        console.log("before loginuserwithemail");
        loginUserWithEmail(values, history);
        console.log("after")
    },
    });
...
}

authActions.ts

export const loginUserWithEmail = (formData: LoginFormData, history: RouteComponentProps['history']) => async (dispatch: any, getState: any) => {
  console.log("inside loginuserwithemail function")
  dispatch({ type: LOGIN_WITH_EMAIL_LOADING });
  try {
    const response = await axios.post('/auth/login', formData);
    console.log("inside here")
    dispatch({
      type: LOGIN_WITH_EMAIL_SUCCESS,
      payload: { token: response.data.token, me: response.data.me },
    });

    dispatch(loadMe());
    history.push('/');
  } catch (err: any) {
    dispatch({
      type: LOGIN_WITH_EMAIL_FAIL,
      payload: { error: err.response.data.message },
    });
  }
};