issue with graphql-request react onClick handler

1. I am using graphql-request to execute a mutation in an onClick handler in a react application

2. The mutation executes successfully (I can verify by looking at the logs in the backend).

3. The code in onClick handler (loginHandler) following the gqlClient.request never executes (console.log or alert)

here is the code, any idea what am I doing wrong…

import { useState, useContext } from'react';
import { gql, GraphQLClient } from 'graphql-request';

    const LoginForm = () => {
        const [email, setEmail] = useState('');
        const [password, setPassword] = useState('');
    
        const LOGIN_MUTATION = gql`
            mutation LoginUser($loginArgs: LoginArgs) {
                loginUser(loginArgs: $loginArgs) { sts msg sessionid }
        }`;
    
        const gqlClient = new GraphQLClient(getGqlUrl());
    
        const loginHandler = async () => {
            let resp;
            try {
                resp = await gqlClient.request(LOGIN_MUTATION, { "loginArgs": { "email": `${email}`, "password": `${password}` } });
            } catch(err) {
                 alert(`error - ${JSON.stringify(err)}`);
            }
            alert(`${JSON.stringify(resp)}`);
            console.log(`${JSON.stringify(resp)}`);
        }
        
        return (
            <form style={formStyle}>
                <label style={{ justifySelf: 'right'}}>Email:</label>
                <input type="text" onChange={(e) => setEmail(e.target.value)} />
                <label style={{ justifySelf: 'right'}}>Password:</label>
                <input type="text" onChange={(e) => setPassword(e.target.value)} />
                <button style={buttonStyle} onClick={loginHandler}>
                    Login
                </button>
            </form>
        )
    }