Push notification not displayed using web-push and service workers

Question

I have converted my MERN application to a PWA using the service worker files that are pre-generated with create-react-app. It seems to be working ok as I can see the service worker is activated in the dev tools.

Now I would like to be able to send push notifications.

I have installed web-push and in my App.js file I am requesting permission from the user to receive notifications with this code:

navigator.serviceWorker.ready.then((registration) => {
  registration.pushManager
    .subscribe({
      userVisibleOnly: true,
      applicationServerKey: process.env.REACT_APP_WEB_PUSH_PUBLIC,
    })
    // additional code to store user's subscription to db
});

The notification I am trying to send comes from a Like button on a user's post. After handling the like, my function runs this request, sending the _id of the user who created the post and a payload, to my server:

await axios.post(
  `${process.env.REACT_APP_API}/send-push-notification`,
    {
      _id: res.data.postedBy,
      payload: {
        title: 'Post Liked',
        body: 'Someone liked your post',
        icon: base64 string of my logo,
      },
    },
);

My backend receives this request, finds the correct user, stringifies the payload, and sends the notification with web-push.

webpush.setVapidDetails(
  'mailto:myemailaddress',
  process.env.WEB_PUSH_PUBLIC,
  process.env.WEB_PUSH_PRIVATE
);

router.post('/send-push-notification', async (req, res) => {
  const { _id } = req.body;
  const user = await User.findById(_id);

  const subscription = user.subscription;
  const payload = JSON.stringify(req.body.payload);

  webpush
    .sendNotification(subscription, payload)
    .then(() => {
      res.status(200).send('Push notification sent');
  })
})

I am then receiving a status response of 200 on the client, suggesting everything is working up until this point.

The issue I am having is that the notification is not being displayed on the user's device. In my service-worker.js file I have added this block, which I believe is responsible for this part:

self.addEventListener('push', (e) => {
  const data = e.data.json();
  console.log('Push received...', data);
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon,
  });
});

This code is not being triggered though as the console.log is not displayed either.

To test the file I added another simple event listener to fire on 'install':

self.addEventListener('install', (e) => {
  console.log('Service Worker installed');
});

And this log is never shown either. Which leads me to believe the issue lies with this file not being read.

Here is the block within serviceWorkerRegistration.js that is registering the service worker:

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        checkValidServiceWorker(swUrl, config);

        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://cra.link/PWA'
          );
        });
      } else {
        registerValidSW(swUrl, config);
      }
    });
  }
}

Any help or ideas on how to resolve this issue would be hugely appreciated. TIA