setting google auth in refine framework

Question

I have already imported the google auth functionality in refine itself but when I change the value of "GOOGLE_CLIENT_ID" to the one I created in google OAuth, the popup for google auth comes in blank. I have added the URI's http://localhost:3000 to the Authorized JavaScript origins for OAuth.

import { useLogin } from "@refinedev/core";
import { useEffect, useRef } from "react";

import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
//import { ThemedTitleV2 } from "@refinedev/mui";
//logo
import { CredentialResponse } from "../interfaces/google";

// Todo: Update your Google Client ID here
const GOOGLE_CLIENT_ID ="hereIAddedmyId.apps.googleusercontent.com";//default:"1041339102270-e1fpe2b6v6u1didfndh7jkjmpcashs4f.apps.googleusercontent.com"

export const Login: React.FC = () => {
  const { mutate: login } = useLogin<CredentialResponse>();

  const GoogleButton = (): JSX.Element => {
    const divRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      if (typeof window === "undefined" || !window.google || !divRef.current) {
        return;
      }

      try {
        window.google.accounts.id.initialize({
          ux_mode: "popup",
          client_id: GOOGLE_CLIENT_ID,
          callback: async (res: CredentialResponse) => {
            if (res.credential) {
              login(res);
            }
          },
        });
        window.google.accounts.id.renderButton(divRef.current, {
          theme: "filled_blue",
          size: "medium",
          type: "standard",
        });
      } catch (error) {
        console.log(error);
      }
    }, []);

    return <div ref={divRef} />;
  };

  return (
    <Container
      style={{
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Box
        display="flex"
        gap="36px"
        justifyContent="center"
        flexDirection="column"
      >
        {/* <ThemedTitleV2                               
          collapsed={false}
          wrapperStyles={{
            fontSize: "22px",
            justifyContent: "center",
          }}
        /> */}
        <span style={{ textAlign: "center", color: "text.secondary", fontSize: "24px", fontWeight: "bold" }}>
          Welcome to HumanAnsys
          
        </span>

        <center> <GoogleButton /> </center>

        <Typography align="center" color={"text.secondary"} fontSize="12px">
        
          Powered by
          <img
            style={{ padding: "0 5px" }}
            alt="Google"
            src="https://refine.ams3.cdn.digitaloceanspaces.com/superplate-auth-icons%2Fgoogle.svg"
          />
          HumanAnsys
        </Typography>
      </Box>
    </Container>
  );
};

It seems to be working fine with the GOOGLE_CLIENT_ID that was in it by default but if I apply mine, there is no error but the popup is all blank