Whitelisted domain, but still I get Login Failed: FirebaseError: Firebase: Error (auth/unauthorized-domain)

Question

Firebase Sign-in with popup is working properly in our react app when running in localhost, deployed the app in render.com as a static website and then whitelisted the domain on which the app is live in the Firebase app. But no matter what, the sign-in with the popup never works. I get the following error

Login Failed: FirebaseError: Firebase: Error (auth/unauthorized-domain).
    at St (assert.ts:136:61)
    at kt (assert.ts:65:28)
    at validate_origin.ts:46:3
    at l (regeneratorRuntime.js:44:17)
    at Generator.<anonymous> (regeneratorRuntime.js:125:22)
    at Generator.next (regeneratorRuntime.js:69:21)
    at y (asyncToGenerator.js:3:20)
    at o (asyncToGenerator.js:22:9)

Similar issue firebase auth domain not authorized even after whitelisting domain but not the same solution to this. Just wondering If I am missing something.

1. Verified the domain whitelisted is properly matching
2. Verified the firebase config is proper

How to reproduce the issue

1. Implement sign-in/signup with popup with firebase in react app
2. Whitelist localhost in firebase app in firebase console
3. Make sure login works properly in localhost
4. Push the changes to github
5. Deploy the app to render.com taken directly from my branch in github
6. Allowlist the domain after deploying same as step 2
7. See if login works

firebase.js

import { getAuth, GoogleAuthProvider } from "firebase/auth";

// Firebase app configuration

const rFirebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
};

const rApp = initializeApp(rFirebaseConfig);
const rAuth = getAuth(rApp);
const rFirestore = getFirestore(rApp);

const authProvider = new GoogleAuthProvider();

export {
  authProvider,
  rAuth,
  rFiresore
 }
}

LoginWithGoogle.js

import {
  rAuth,
  authProvider,                    
} from "../../firebase";
import { signInWithPopup } from "firebase/auth";


signInWithPopup(rAuth, authProvider)
      .then((data) => {
        // bunch of stuffs done
      })
      .catch((error) => {
        console.log("Login Failed:", error);// <-- error thrown here
      })
      .finally(() => {
        setLoading(false); // Set loading state to false after completing the login process
      });