Как вызвать содержимое push-уведомлений в веб-компоненте React и показать его в браузере?

Question

Я создал приложение React с помощью create-реагировать-приложение, а также я установил firebase для отправки push-уведомлений, я могу видеть мое push-уведомление поверх моего браузера, все работает до этого момента, теперьпроблема в том, что я хочу взять полезную нагрузку из push-уведомления в компоненте реагирования, а затем показать его в виде HTML-полей на веб-странице?

Я следовал форме видеоруководства здесь и я вижу всплывающее уведомление и полезную нагрузку внутри консоли.

Пример кода

1. для файла App.js (это реагирующий код по умолчанию, который дает нам сообщение, что я вызываю только мой js-файл firebase-messaging)

   import React, { Component } from 'react';
   import logo from './logo.svg';
   import './App.css';
   import './firebase/firebase-messaging';  // my file
   
   class App extends Component {
   
   
   
    render() {
       return (
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <p>
               Edit <code>src/App.js</code> and save to reload.
             </p>
             <a
               className="App-link"
               href="https://reactjs.org"
               target="_blank"
               rel="noopener noreferrer"
             >
               Learn React
             </a>
           </header>
         </div>
       );
     }
   }
   
   export default App;
   

2. файл firebase-messaging.js (это я создал)

   import * as firebase from 'firebase';
   
   // Initialize Firebase
   var config = {
       apiKey: "AIzaSyCUNMp_xxxxxxxxxxxx",
       authDomain: "xxxxxx.firebaseapp.com",
       databaseURL: "https://xxx.firebaseio.com",
       projectId: "xx221f4",
       storageBucket: "xx.appspot.com",
       messagingSenderId: "xxx619"
     };
   
     firebase.initializeApp(config);
   
     const msg = firebase.messaging();
   
     msg.requestPermission().then(()=>{
   
     console.log("Permission Granted");
   
     return msg.getToken();
     }).then((token) =>{
   
       console.log(token);
   
      }).catch((e)=>{
   
      console.log(e)
   
       });
   
     // show payload to the console
   
   
      msg.onMessage((payload) =>{
      console.log("My Payload : ",payload)
   
       return payload;
   
        });
   

3. файл firebase-messaging-sw.js (я хранил его в общей папке)

    import * as firebase from 'firebase';
   
    // Initialize Firebase
    var config = {
    apiKey: "AIzaSyCUNMp_xxxx",
    authDomain: "xxx.firebaseapp.com",
    databaseURL: "xxx.firebaseio.com",
    projectId: "xxx",
    storageBucket: "xxx.appspot.com",
    messagingSenderId: "xxx4619"
    };
   
    firebase.initializeApp(config);
   

Как я могу использовать push-уведомления внутри компонента React, а затемкак это, как поля, как показано ниже внутри HTML-файла в браузере?

Name : xyz kumar
Employee ID : EMP00025
Arrival time : 3 April 19 - 17:10

и моя полезная нагрузка push-уведомлений выглядит так:

{
    "to": "xxxxxxxxxKQDyG4saKKRodMs_6ieVAdKBlBIjxVIqHjKLXHImSG-cQneFcM",
    "notification":{
        "title":"Employee Recognized",
        "body":{
            "empName": "xyz Kumar",
            "empID" :   "EMP00025",
            "punchInTime":"3 April 19 - 17:10"
        }
    }
 }