Unhandled Runtine error on Google Sign In (Next.js+FIrebase)

I am getting the following error when trying to sign in using firebase native google sign in methods,

Unhandled Runtime Error
Error: Network Error

Call Stack
Nj/</</</f<
node_modules/@firebase/auth/dist/auth.esm.js (273:408)

and after this the popup automatically closes and I get this error,

Unhandled Runtime Error
Error: The popup has been closed by the user before finalizing the operation.

Here is my code for sign in button and auth function,

import { auth, firestore, googleAuthProvider} from '../lib/firebase';
import { useContext, useEffect, useState, useCallback } from 'react';
import { UserContext } from '../lib/context';
import debounce from 'lodash.debounce';


export default function Enter(props) {
  const { user, username } = useContext(UserContext);
  return (
    <main>
      {user ? !username ? <UsernameForm /> : <SignOutButton /> : <SignInButton />}
    </main>
  );
}

// Sign in with Google button
function SignInButton() {
  const signInWithGoogle = async () => {
    await auth.signInWithPopup(googleAuthProvider);
  };

  return (
    <>
      <button className="btn-google" onClick={signInWithGoogle}>
        <img src={'/google.png'} width="30px" /> Sign in with Google
      </button>
      <button onClick={() => auth.signInAnonymously()}>
        Sign in Anonymously
      </button>
    </>
  );
}

// Sign out button
function SignOutButton() {
  return <button onClick={() => auth.signOut()}>Sign Out</button>;
}

firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
  apiKey: "...",
  authDomain: "craft-share-1288c.firebaseapp.com",
  projectId: "craft-share-1288c",
  storageBucket: "craft-share-1288c.appspot.com",
  messagingSenderId: "960895737878",
  appId: "1:960895737878:web:e003d00478721bd0a6d537",
  measurementId: "G-0R8HZCSTD4"
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}
// Auth exports
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

My package.json is,

{
  "name": "craft-share",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "firebase": "^8.2.1",
    "lodash.debounce": "^4.0.8",
    "lodash.kebabcase": "^4.1.1",
    "next": "12.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-firebase-hooks": "^2.2.0",
    "react-hook-form": "^6.14.2",
    "react-hot-toast": "^1.0.2",
    "react-markdown": "^5.0.3"
  },
  "devDependencies": {
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10"
  }
}