I am trying to use the firebase console to send test messages to my app which has already been configured and I am getting the token back successfully but I do not see any messages appear when I attempt to send a test message via the firebase messaging console. The documentation is kind of confusing or maybe I just suck at developing

Here is my firebase-config.js file

import { initializeApp } from "firebase/app";
import {getFirestore} from "@firebase/firestore";
import { getMessaging, getToken, onMessage } from "firebase/messaging";


//Change all these properties to ENV vars
const firebaseConfig = {
  apiKey: "AIzaSyA6dRIuOURWsb0ZnJ7u7PiuUlmKH7iw3ww",
  authDomain: "moby-3fda9.firebaseapp.com",
  databaseURL: "https://moby-3fda9-default-rtdb.firebaseio.com",
  projectId: "moby-3fda9",
  storageBucket: "moby-3fda9.appspot.com",
  messagingSenderId: "48918745183",
  appId: "1:48918745183:web:547b4415d00949b1634bea",
  measurementId: "G-FL67YXFVY8"
};

  //intitialize app needs to happen first before getting the messaging object
  const app = initializeApp(firebaseConfig);
  const messaging = getMessaging();



  getToken(messaging, { vapidKey: 'BFEKQoDdONC12U2EfGB21eUGo8U08A37Mfn_E3i9FHCsuTocudQRxpxmxjlpxHEXX3Lqjep1hpNwhq1STngJo_k' }).then((currentToken) => {
    if (currentToken) {
      // Send the token to your server and update the UI if necessary
      // ...
      console.log("got the token", currentToken)
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
      // ...
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    // ...
  });

  onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
  });





  export const db = getFirestore(app);

I can see the token logged in the console but I can not see any messages being received when I attempt to send a test message from the firebase console.