FCM (Firebase Cloud Messaging) : Firebase push notifications are displayed in Firefox but not in Chrome

I have integrated Firebase in my React code. Push Notifications are displayed in Firefox, the methods onMessage() and onBackgroundMessage() work fine in Firefox but not in Chrome. I have initialised firebase in my App.js (Main component that loads all the components). I have included firebase-messaging-sw.js in my public folder. Please let me know if I need to add/subtract anything from my code.

I have tested this code on localhost as well as on a secured domain.

Here is my firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

firebase.initializeApp({
    databaseURL: 'databaseURL.firebaseio.com',
    apiKey: "apiKey",
    authDomain: "authDomain.firebaseapp.com",
    projectId: "projectId",
    storageBucket: "storageBucket",
    messagingSenderId: "messagingSenderId",
    appId: "appId"
});

const initMessaging = firebase.messaging();

initMessaging.onBackgroundMessage(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = {
      body: 'Background Message body.',
      // icon: '/firebase-logo.png'
    };
  
    self.registration.showNotification(notificationTitle,
      notificationOptions);
  });

App.js code

import firebase from './firebase';

export class App extends Component {

  callFirebase = () => {
    try {
      const messaging = firebase.messaging();
      messaging.requestPermission().then(() => {
        return messaging.getToken({ vapidKey: "vapidKey" })
      })
        .then((token) => {
          console.log("Connected To FIREBASE")
          console.log("Token: ", token);
          this.props.firebaseToken(token);
        })
        .catch(e => {
          this.props.firebaseToken(null);
          console.log("Err from firebase", e)
        })

      messaging.onMessage(function (payload) {
        console.log("Message received. ", payload);
        // ...
      });
    }
    catch (e) {
      console.log("Error from firebase: ", e);
    }

  }

  componentDidMount() {
    this.callFirebase();
  }

render() {
    return (
     <Code/>
    );
  }
}


export default (App);