With react, Google Sign In Button Modal is blank

Question

I'm using the google sign in button as defined here.

The button itself has been customised as below:

import React from "react";
import Button from 'react-bootstrap/Button'


//https://developers.google.com/identity/gsi/web/guides/display-button
//https://developers.google.com/identity/gsi/web/tools/configurator to customise the button
// https://v5.reactrouter.com/web/example/auth-workflow example of authentication
class LoginButton extends React.Component {

    render() {

        return (
            <>
            <div id="g_id_onload"
                 data-client_id="mygoogleclientid.apps.googleusercontent.com"
                 data-context="signin"
                 data-ux_mode="popup"
                 data-login_uri="https://mywebsite.com"
                 data-auto_prompt="false">
            </div>

            <div class="g_id_signin"
                 data-type="standard"
                 data-shape="pill"
                 data-theme="outline"
                 data-text="signin_with"
                 data-size="medium"
                 data-logo_alignment="left">
            </div>
            </>
        );
    }
}

export default LoginButton;

However, I'm finding that although the button renders fine:

The modal is rendered as blank

Answer 1

My Authorized direct URLs were incorrect. I had to use http instead of https as per this answer