problem in receiving the foreground messages through firebase

I have setup a next app, and want to receive firebase foreground messages.
I created two files, firebase.js, firebase-notification.js.

Inside the firebase.js file I have configured the firebase app-

eslint-disable import/no-mutable-exports -- to ignore let error*/

import { initializeApp } from 'firebase/app';


const firebaseConfig = {
apiKey: 'my api key',
authDomain: 'my domain',
projectId: 'my project id',
storageBucket: 'My storage bucket',
messagingSenderId: 'senderID',
appId: 'My app id',
measurementId: 'measurement ID',
 };

export const app = initializeApp(firebaseConfig);

Inside the firebase-notifications.js file I have setup the messaging and listeners

'use client';

import * as React from 'react';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

import { adminProfile } from '@/lib/admin';
import { carrierProfile } from '@/lib/carrier';
import { app } from '@/lib/firebase';
import { shipperProfile } from '@/lib/shipper';
import { useUser } from '@/hooks/use-user';

let messaging;
if (typeof window !== 'undefined') {
  messaging = getMessaging(app);
}

export function WebNotifications() {
  // console.log('Setting up Web Notification', messaging);
  const { user } = useUser();

  React.useEffect(() => {
    if (user?.app_type) {
      requestPermission();
       }
  }, []);

  // Request permission to send notifications
  const requestPermission = async () => {
    try {
      const permission = await Notification.requestPermission();

      if (permission === 'granted') {
        // Get the token
        const token = await getToken(messaging, {
          vapidKey: 'my vapid key',
        });
        if (token) {
          const requestOptions = {
            admin: adminProfile.updateNotificationToken,
            sub_admin: adminProfile.updateNotificationToken,
            shipper: shipperProfile.updateNotificationToken,
            sub_shipper: shipperProfile.updateNotificationToken,
            carrier: carrierProfile.updateNotificationToken,
            sub_carrier: carrierProfile.updateNotificationToken,
          };

          // Send this token to server
          const request = requestOptions[user.app_type];
          request({ device_id: token })
            .then(() => {
              setupForegroundMessageListener();
            })
            .catch((_) => {});
        }
        // else {
        //   console.log('No registration token available. Request permission to generate one.');
        // }
      }
      // else {
      //   console.log('Unable to get permission to notify.');
      // }
    } catch (_) {
      // console.log(_);
    }
  };

  const setupForegroundMessageListener = () => {
    console.log('Setting up listener');

    onMessage(messaging, (payload) => {
      console.log('Message received: ', payload);
      const notificationTitle = payload.notification.title;
      const notificationOptions = {
        body: payload.notification.body,
        icon: '@/app/icon.png',
      };
      // eslint-disable-next-line no-new -- We need to trigger a notification without storing the instance.
      new Notification(notificationTitle, notificationOptions);
    });
    console.log('Finished with setting up', messaging);
  };
  
  return false;
}

And i have used this web notification in my main layout.js file
as a child to enable notification.

These all console messages are printing for setting up the listener and finished with setting up

I was expecting a notification when my app is on foreground
for testing purpose I have send various notifications through my backend but not receiving in my friend.