How to fix event listener issues of react js from mobile browser

I have a react js app. And it has one solidity event listener Listener works fine the first time I use the app

But when I press home button or go to another app from the browser and reopen the browser after sometimes(1/2 minutes), the listener stops listening and it only starts listening again after refreshing the app.

So is there any solution with that I can handle it?

My code

useEffect(() => {
    let isMounted = true
    
    if (isMounted && props.blockchain.smartContract != null && props.blockchain.smartContract != undefined && props.users.length != 0) {

      props.blockchain.smartContract.events.Transfer({}).on("connected", function(subscriptionId){
        console.log(subscriptionId);
        console.log("Subscription ID")
    }).on('data', event => {

          
          let item = { key:event.transactionHash,sender: event.returnValues.from, recipient: event.returnValues.to, value: event.returnValues.value / (10 ** 18), type_id: '1', interval: '1s' }
          
          setFeed(item,event)
          
          console.log(event.transactionHash)
         


        })
        .on('changed', function(event){
            // remove event from local database
            
            
        })
        .on('error', function(error, receipt) { // If the transaction was rejected by the network with a receipt, the second parameter will be the receipt.
            console.log(error)
            setCointEvent(Math.random() * 100)
        });
    }
    return (()=>{
      isMounted = false
      
    })
  }, [props.blockchain.smartContract, props.users,coinEvent]);

Does react js hooks understand if user closes the browser?