This is my code i have set up the client ID correctly

once I click a button with id 'buttonDiv', a pop is shown, if no user account exists, i am asked to login, once i login, i have to choose the email to authenticate with, but i get a blank white space instead

import { Box, Button, Typography } from '@mui/material';
import Divider from 'components/Divider';

function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
  }

function GoogleComponent({ action, isLoginPage }) {
  const classes = useStyles();

  window.onload = function () {
    window.google.accounts.id.initialize({
      client_id: process.env.REACT_APP_CLIENT_ID,
      callback: handleCredentialResponse,
      scope: 'email',
      ux_mode: 'popup',
    });
    window.google.accounts.id.renderButton(
      document.getElementById("buttonDiv"),
      { theme: "outline", size: "large" }  // customization attributes
    );
    window.google.accounts.id.prompt(); // also display the One Tap dialog
  }
 
    return (
      <Box className={classes.box}>
         <div id="buttonDiv"></div> 
      </Box>
    );
  }

  export default GoogleComponent;

when I change the ux_mode: 'redirect' it works but that's not how I want it.

I need a pop up to return a code and then use the code to make a post request to the backend API

I have added the http://localhost and http://localhost:3000 to the authorised domains on the cloud console.

what could I be missing?