Reactjs web app google maps working on PC localhost but not on mobile

Question

My web app made on react has been working wonders on the PC, but I recently noticed that when I open the same app from the localhost:3000 on my phone it doesn't open. As I mentioned it is a react app, so some of it's components load for instance in the given picture you can see that my navbar, sidebar, and footer opens just the way they're supposed to open, but in the middle is where google map is supposed to be, it is where it is supposed to be on the PC but on mobile it just isn't there, any help from people would be helpful since we're just so clueless about this thing.

We have tried nothing, since we just don't know where this problem has originated from.

import React,{Component} from 'react';
import { GoogleMap,Marker,InfoWindow } from '@react-google-maps/api';
import {connect} from 'react-redux';
import {mapTypeChangeSync} from '../actions/map';
import donut from "./icons/donut.png";


class GoogleMapWrapper extends Component{


    handleType = () => this.props.mapTypeChangeSync(this.map.getMapTypeId());
    /*
    onLoad = (map) => {
        const elt = document.createElement('p');
        elt.innerHTML = 'maps loadedddd...';
        document.body.appendChild(elt);
        this.map = map;
    }
    */

    render(){
        const {currentLocation,mappedMarkers,onClick,map} = this.props;
        //console.log(donut);
        //console.log('ff',new google.maps.LatLng(24.919988335566842,67.1343894711640));
        if (currentLocation.lat && currentLocation.lng)
            return (
                <GoogleMap mapContainerStyle= {{height: "100vh",
                 width: "100vw" }} center = {currentLocation} zoom = {20}
                 onClick = {onClick? (e) => onClick(e):undefined} 
                 mapTypeId = {map} onMapTypeIdChanged = {this.handleType}
                 onLoad = {map => this.map = map}>

                    <Marker position = {currentLocation} 
                     icon = {{url:donut}} />

                    <InfoWindow position = {currentLocation}>
                        <p>Location Found</p>
                    </InfoWindow>

                    {mappedMarkers.map((marker,i) => (
                        <Marker key = {marker.id?marker.id:i}
                         position = {marker.location}
                         label = {marker.id?marker.id:undefined} />
                    ))}

                </GoogleMap>
                );

        else
            return null;

    }
}

const mapStateToProps = ({currentLocation,objects,map},{cachedMarker}) => {

    const mappedMarkers = objects.map(obj =>({
        id:obj.id,
        location:obj.location
    }));

    console.log('cached Marker:',cachedMarker)

    if (cachedMarker)
        mappedMarkers.push(cachedMarker);

    return {currentLocation,mappedMarkers,map};
}



export default connect(mapStateToProps,
            {mapTypeChangeSync})(GoogleMapWrapper);

this is our normal output app screen this is what we get when we open it on our mobile

Answer 1

According to this github issue, setting the version to 3.30 solves the problem like so :

<GoogleMapReact
  bootstrapURLKeys={{
    key: process.env.REACT_APP_MAP_KEY,
    v: '3.30',
  }}
/>

Personally this did not work for me, but maybe it will for you.