"beforeinstallprompt" Event Listener not triggered on page load. Next.js 14, Next-PWA

[ChiragChrg]

Im trying to manually trigger PWA install prompt using my UI.
The PWA id called from root page.tsx & Sidebar component.
HandlePWAInstall function is triggered from this page

pwa.ts

interface DeferredPrompt {
    prompt: () => void;
    userChoice: Promise<{ outcome: string }>;
}

let deferredPrompt: DeferredPrompt | null = null;

// Show PWA install alert triggered by user button click
export const HandlePWAInstall = async () => {
    console.log("deferredPWAPrompt", deferredPrompt);

    if (deferredPrompt) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        console.log(outcome);
        deferredPrompt = null;
    } else {
        alert("Prompt Failed");
    }
};

const PWA = () => {
    console.log("PWA Triggered")
    window.addEventListener("beforeinstallprompt", (e) => {
        console.log("PWA Event", e)
        e.preventDefault();
        deferredPrompt = e as unknown as DeferredPrompt;
    });

    window.addEventListener("appinstalled", () => {
        deferredPrompt = null;
        console.log("PWA was installed");
    });
};

export default PWA;

I have used a similar method on another project and it works correctly. (prompt is triggered using button on Toast notification)

[ChiragChrg]

Issue is resolved. Apparently the issue persists only on local development. The PWA prompt is triggered on button click in the live production deployment 👍🏻