How to fix PWA notifications problem (regular notifications not push-notifications) on andriod?

Question

I'm trying to create a simple PWA with react in typescript. I was trying to follow the tutorial here https://blog.logrocket.com/building-pwa-react/

Code: https://github.com/Deekshithrathod/temp-pwa-test

Deployed Website: https://test-pwa-2jzz.onrender.com

To create a PWA with TypeScript support using Create React App, I used the npx command below:

npx create-react-app pwa-react-typescript --template cra-template-pwa-typescript

This is how my App component looks like, there are no other components

function App() {

  const sendNotification = () => {
    new Notification("Not Title", {
      body: "Notification Body",
      icon: "logo.png",
    });
  };

  const handleNotifyClick = () => {
    setCount((prevCount) => prevCount + 1);
    if ("Notification" in window) {
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          sendNotification();
          setTimeout(sendNotification, 5000);
        }
      });
    }
  };
  return (
    <div className="App">
        .
        .
        .
      <p>You clicked {count} times</p>
      <button onClick={handleNotifyClick}>Notify Me</button>

        .
        .
        .

    </div>
  )
}

Ideal Flow:

1. User visits the website
2. User sees the prompt to install the PWA
3. User installs
4. User clicks on the button
5. count is incremented, user sees a notification immediately
6. sees a notification after 5seconds

But unfortunately the notifications aren't coming on the andriod phone that I'm trying (OnePlus5 with Andriod 10) & they work like charm on my Mac (I mean, I get both notifications on mac from the browser). What is it that I'm doing wrong? how to fix it?