using dispatch on react

I am new to react and I'm trying to create a register and login page with react-redux and dispatch using the mern stack.

When I am calling the method the function did not run.

I have a file for the login page:

    import React from "react";    import {login} from '../../actions/authActions';    export class Login extends React.Component {        constructor(props) {            super(props);        }        checkIfElementIsEmpty = (element) => {            if (!element) {                return false            }            if (element.value.length === 0)            {                return false;            }            return true;        }        handleOnClickLogin = () =>        {            let usernameElement = document.getElementsByName("loginUsername")[0];            let passwordElement = document.getElementsByName("loginPassword")[0];            if (!this.checkIfElementIsEmpty(usernameElement))            {                usernameElement.style.backgroundColor = "#ff000042";                return;            }            if (!this.checkIfElementIsEmpty(passwordElement))            {                passwordElement.style.backgroundColor = "#ff000042";                return;            }            console.log("asd");            login(usernameElement.value, passwordElement.value);        }        setColorToDefault = (e) =>{            e.target.style.backgroundColor = "#f3f3f3";        }        render() {            return <div className="base-container" ref={this.props.containerRef}><div className="header">Login</div><div className="content"><div className="image">                            {/* <img src={loginImg}/> */}</div><div className="form"><div className="form-group"><label htmlFor="username">Username:</label><input type="text" name="loginUsername" placeholder="username" onFocus={this.setColorToDefault}/></div><div className="form-group"><label htmlFor="password">Password:</label><input type="password" name="loginPassword" placeholder="password" onFocus={this.setColorToDefault}/></div></div></div><div className="footer"><button type="button" className="btn" onClick={this.handleOnClickLogin}>                            Login</button></div></div>        }    }

and a file called "authActions.js" with the function "login" that should send the request to the server and validate the login.

    export const login = (email, password) => (dispatch: Function) => {        console.log("bbb");        // Headers        const config = {            headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin': "*"            }        }      // Request body      const body = JSON.stringify({ email, password });      axios        .post('http://${HOST}:${PORT}/api/auth/login', body, config)        .then(res =>          dispatch({            type: LOGIN_SUCCESS,            payload: res.data          })        )        .catch(err => {          dispatch(            returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL')          );          dispatch({            type: LOGIN_FAIL          });        });    }

When handleOnClickLogin is called, I only see the 'aaa' on the console. The 'bbb' is never being printed.Why this is happening and how I need to use dispatch and react-redux correctly?