push notification through service worker in react js (pwa)

I'm trying push notification with service worker in PWA. After registering service worker. I have added event listener for install and activate and inside the activate event listener added logic for registering to push service through push manager subscription but the problem is no logs are present in console regarding the activate and install events whereas trying to test push through chrome dev tools and not working here is my code:

index.js

serviceWorker.register()

worker.js

const publicVapidKey = "BOdud_KdO16dL40D56LbksLa6ElXFAJu-2XEdIKQUmehzomo6FES2jJ1niaUYrCobfI8U5rkqeQNjPB03mKZMvY"

export const register = () => {
  console.log('register called');
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js')
      .then((responseRegister) => {
        console.log('register object', responseRegister);
        window.registration = responseRegister;
      })
      .catch((err) => {
        console.log('error is ', err);
      })
  }
}

export const unregister = () => {
  console.log("unregister called");
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
      .then(function (registrations) {
        console.log('registrations', registrations);
        for (let registration of registrations) {
          registration.unregister()
        }
      }).catch(function (err) {
        console.log('Service Worker registration failed: ', err);
      });
  }
}

window.self.addEventListener('install', (event) => {
  console.log('service worker installed', event);
})

window.self.addEventListener('activate', (event) => {
  console.log('service worker activated', event);

  console.log('window', window);
  window.registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  }).then((subscription) => {
    console.log('subscription', subscription);
  })
    .catch((err) => {
      console.log('error in subscribing to push', err);
    });
})

window.self.addEventListener("push", e => {
  const data = e.data.json();
  console.log("Push Recieved...");
  window.registration.showNotification(
    data.title, {
    body: "Notified by Traversy Media!",
  });
});

function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, "+")
    .replace(/_/g, "/");

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

clicking on push doesn't fire any push event