React Unable to perform Google Sign In, no errors are visible

Question

My original challange started with gapi is not defined when loading React Component.

This has helped me reach to part where I see Google Sign In screen

and also interact with it as

However, when I click on the account, the Google Page goes away and nothing happens, no consent screens, no error . I am using Yarn and my application runs on port 3000.

My React Component looks like

/* global gapi */
import React from 'react';


class LoginButton extends React.Component {

    constructor(props) {
        super(props);

        this.onSignIn = this.onSignIn.bind(this);
    }


    onSignIn(googleUser) {
        console.log("user signed in"); // plus any other logic here
    }

    componentDidMount() {
        gapi.load('auth2', () => {
            // Retrieve the singleton for the GoogleAuth library and set up the client.
            this.auth2 = gapi.auth2.init({
                client_id: '793065532423867-j06sr2rufh7ns1kepcdolt9l22ph5pso.apps.googleusercontent.com'
            });
    }

    render() {
        return (
            <div className="g-signin2" data-onsuccess={this.onSignIn}></div>
        );
    }

}

export default LoginButton;

Also, my google client setting look like

As I am working locally, I believe I do not have to do Domain Verification at this time

Could some one please help me understand the issue and how to debug/fix it? The complete repository is available at https://github.com/hhimanshu/google-login-with-react

Thanks in advance