Next JS app asks for location permission on localhost but not when deployed to Heroku, Vercel or Digital Ocean

I am building a Next JS app with location features. I am creating a geofence and would like the app to pop up "Allow location features" when the user lands on the page. This is how I handle the location:

        const geoLocation = () => {
            if (!navigator.geolocation){
                setStatus('Geolocation is not supported by your browser');
            }else{
                setStatus('Locating...');
                navigator.geolocation.getCurrentPosition((position) => {
                    setStatus(null);
                    setLat(position.coords.latitude);
                    setLng(position.coords.longitude);
                }, () => {
                    setStatus('Unable to retrieve your location');
                })
            }
        }

        geoLocation();

When I run this on localhost, everything works perfectly and I get the pop up asking for Access to location. When I deploy to Heroku, Vercel or Digital Ocean though, it doesnt work. I dont get any errors when deploying. How can I fix this?