Events not being sent to firebase analytics on the web

Firebase Version: 8.10.0

Project: Next JS with Typescript

How am I sending:

const logClickEvent = useCallback(
  (eventName: string, eventParams?: { [key: string]: any }) => {
    if (typeof window !== "undefined") {
      analytics().logEvent(eventName, eventParams)
    }
  },
  []
)

What I receive using the Google Analytics Debugger:

As you can see, the Sending Request link does get executed but I don't see the log on Debug view of firebase. Then, I click on the Sending Request link and it opens an empty page. After that, I see a log on the Debug view of firebase. What might be the issue here? Please help!!

This is how I integrated firebase in my Next JS project: In utils/firebase.ts:

import "firebase/analytics"
import firebase from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}
const { analytics } = firebase

export { analytics }

In _app.tsx:

useEffect(() => {
  if (typeof window !== "undefined") {
    analytics()
  }
}, [)