Issue with tracking using Mapbox GL JS on mobile devices

Question

I'm just using the out of the box "GeolocateControl" component from react-map-gl and it works perfectly on my pc. However on my phone when I press of the geolocate button nothing happens? My browser in mobile has permission to access location but no pop-up shows like on pc asking for permission to show location. I've tried using Chrome, Firefox and the default browser.

I've tried using Chrome, Firefox and the default browser. On my iPad it doesn't work either, only on my pc it's functioning properly.

       <ReactMapGL
           {...viewport}
           mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
           onViewportChange={viewport => {
              setViewport(viewport);
            }}
        >
           <GeolocateControl
               className={classes.geolocateStyle}
               positionOptions={{ enableHighAccuracy: true }}
               trackUserLocation={true}
           />
       </ReactMapGL>

Expecting it to bring me to the current location and put a blue marker on screen as it does on pc.