React-js how to trigger 'BeforeInstallPromptEvent' for launch the "pop up" add to homescreen

I'm currently working on a react based app and I'm facing the PWA topic. I want to trigger and show when I want the pop-up that allows you to add the PWA to the home screen. I recently read that I can trigger it using BeforeInstallPromptEvent but there are some rules to follow like: - The web app is not already installed - Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds) - Served over HTTPS (required for service workers) - Has registered a service worker with a fetch event handler

Now I've all of those prerequisites but I actually unable to launch BeforeInstallPromptEvent, so I never viewed the pop-up, can someone help me?

Down you can find in which way I've intercepted this event

Thanks in advice

window.addEventListener('beforeinstallprompt', function (e) {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault()
    // Stash the event so it can be triggered later.
    deferredPrompt = e

    showAddToHomeScreen()
})

function showAddToHomeScreen() {

    var a2hsBtn = document.querySelector(".ad2hs-prompt");

    // @ts-ignore
    a2hsBtn.style.display = "block";

    // @ts-ignore
    a2hsBtn.addEventListener("click", addToHomeScreen);

}

function addToHomeScreen() {  var a2hsBtn = document.querySelector(".ad2hs-prompt");  // hide our user interface that shows our A2HS button
    // @ts-ignore
    a2hsBtn.style.display = 'none';  // Show the prompt
    deferredPrompt.prompt();  // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
    // @ts-ignore
        .then(function(choiceResult){

            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
            } else {
                console.log('User dismissed the A2HS prompt');
            }

            deferredPrompt = null;

        });}