FCM onMessage not trigerring in React but app server sends multicast_messages properly

I am sending the message from a Python script as follows.

import firebase_admin
from firebase_admin import credentials, messaging

# initializations
cred = credentials.Certificate('Full path to firebase-admin-sdk.json')
print('Connecting...')
firebase_admin.initialize_app(cred)

registration_tokens = [
    'valid_registration_token_from_client',
]

message = messaging.MulticastMessage(
    data={'score': '850', 'time': '2:45'},
    tokens = registration_tokens
)

response = messaging.send_multicast(message)

print('{0} messages were sent successfully.'.format(response.success_count))

After executing the above code, it prints 1 message sent successfully. I looked at my Firebase console and found that the number of sent notifications increased by 1. However, my React Js client does not seem to receive the message.

In react app, Root public folder has firebase-messaging-sw.js file,

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";


const firebaseConfig = {
    apiKey: "MY_API_KEY",
    authDomain: "FIREBASE_APP_DOMAIN",
    databaseURL: "DB_URL",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "MEASUREMENT_ID"
};

const firebaseApp = initializeApp(firebaseConfig);

const messaging = getMessaging(firebaseApp);

onBackgroundMessage(messaging, (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);
  });

In App.js,

import React, {Component} from "react";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import { initializeApp } from "firebase/app";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.connectButtonPressed = this.connectButtonPressed.bind(this);
  }

  render() {
    return (
      <div><button onClick={this.connectButtonPressed}>Click</button></div>
    )
  }

  connectButtonPressed(e) {
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        console.log('Notification permission granted.');
        // TODO(developer): Retrieve a registration token for use with FCM.

        // Get registration token. Initially this makes a network call, once retrieved
        // subsequent calls to getToken will return from cache.
        const firebaseConfig = {
          apiKey: "API_KEY",
          authDomain: "AUTH_DOMAIN",
          databaseURL: "DB_URL",
          projectId: "PROJECT_ID",
          storageBucket: "STORAGE_BUCKET",
          messagingSenderId: "SENDER_ID",
          appId: "APP_ID",
          measurementId: "MEASUREMENT_ID"
        };
      
        const firebaseApp = initializeApp(firebaseConfig);
        const messaging = getMessaging(firebaseApp);
        onMessage(messaging, (payload) => {
          console.log('Message received. ', payload);
        });
        getToken(messaging, { vapidKey: 'VAPID_KEY_FROM_CONSOLE' }).then((currentToken) => {
          if (currentToken) {
            // Send the token to your server and update the UI if necessary
            console.log('currentToken: ', 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);
          // ...
        });
      } else {
        console.log('Unable to get permission to notify.');
      }
    });
  }
 }

The client can successfully request for and receive the registration token to which I send the message from the Python script. However, the onMessage event is not being triggered which makes me think that the client might not be receiving the message even though I sent the message to the token associated with this client.

What might be the issue here? What am I missing?