Unable to receive notifications via FCM in NextJS

Blog I followed : https://medium.com/@sarafathulla/how-to-add-firebase-push-notifications-in-next-js-react-8eecc56b5cab

I did the exact same process, but I cant see notifications in my console or anywhere.

It was not mentioned in which file we have to do this part so I did in my _app.js in pages folder:

 import "../styles/globals.css";
 
 import { firebaseCloudMessaging } from "../webPush";
 import "firebase/messaging";
 import firebase from "firebase/app";
 
 import "react-quill/dist/quill.snow.css";

 function MyApp({ Component, pageProps }) {
   React.useEffect(() => {
     setToken();
     async function setToken() {
       try {
         const token = await firebaseCloudMessaging.init();
         if (token) {
           console.log("checking token");
           getMessage();
    }
  } catch (error) {
    console.log(error);
  }
}
function getMessage() {
       const messaging = firebase.messaging();
       messaging.onMessage((message) => console.log("foreground ", message));
     }
   },[]);

   React.useEffect(() => {
     // Remove the server-side injected CSS.
          const jssStyles = document.querySelector("#jss-server-side");
          if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
          }
        }, []);
 
   return <Component {...pageProps} />;
 }

 export default MyApp;

Rest of the files are exactly the same as mentioned in the blog. There are no errors in console. When I try to send POST from postman I receive the following:

{
"multicast_id": 5967494073963735539,
"success": 1,
"failure": 0,
"canonical_ids": 0,
"results": [
    {
        "message_id": "0:1601972416385592%e609af1cf9fd7ecd"
    }
]
}

Can someone help me out here? I can't figure out what I'm doing wrong.