ReactMapGL not showing after deploying, buit during development it is working perfectly

[mrmayank11]

This is my code

`
import * as React from 'react';
import { useState, useEffect } from 'react';
import StarIcon from '@mui/icons-material/Star';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import axios from 'axios';
import { format } from 'timeago.js';
import Login from './components/Login';
import Register from './components/Register';

function App() {
// const myStorage = window.localStorage;
const [pins, setPins] = useState([]);
const [login, setLogin] = useState(false);
const [register, setRegister] = useState(false);

const [currUser, setCurrUser] = useState(null)
const [currentPlaceId, setCurrentPlaceId] = useState(null);
const [newPlace, setNewPlace] = useState(null);
const [newPlaceName, setNewPlaceName] = useState("");
const [newPlaceDesc, setNewPlaceDesc] = useState("");

const [newRating, setNewRating] = useState(1);

// console.log(pins);
const [viewState, setViewState] = React.useState({
longitude: 50,
latitude: 37,
zoom: 4,
transitionDuration: 1000
});

const loginwindow = (e) => {
e.preventDefault();
setRegister(false);
setLogin(true);
}
const logoutclick = (e) => {
e.preventDefault();
setCurrUser(null)
}
const registerwindow = (e) => {
e.preventDefault();
setLogin(false);
setRegister(true);
}
const handleSubmit = async (e) => {
e.preventDefault();
const newPin = {
username: currUser,
desc: newPlaceDesc,
title: newPlaceName,
rating: newRating,
long: newPlace.long,
lat: newPlace.lat
}
setNewPlace(null)

// setNewPlaceDesc(null);
// setNewPlaceName(null);
// setNewRating(null);
try {
  const res = await axios.post('/pins', newPin);
  setPins([...pins, res.data])
} catch (error) {
  console.log(error);
}

}
const handleMarkerClick = (id, lat, long) => {
setCurrentPlaceId(id);
};
const handleAddClick = (e) => {
e.preventDefault();
if (currUser == null) {
setLogin(true)
}
else {
setCurrentPlaceId(null);
const lat = e.lngLat.lat;
const long = e.lngLat.lng;

  setNewPlace(
    {
      lat,
      long
    }
  )
}

};
// console.log(pins);
useEffect(() => {

const getPins = async () => {
  try {
    const res = await axios.get('/pins')
    setPins(res.data)
    // console.log(res.data);
  } catch (error) {
    console.log(error);
  }

}
getPins();

}, [])

// console.log(newPlace)
return (

<div>


  <ReactMapGL
    mapboxAccessToken={process.env.REACT_APP_MAPBOX}
    {...viewState}
    transitionDuration="1000"
    onMove={evt => setViewState(evt.viewState)}
    style={{ width: "100%", height: "100vh" }}
    mapStyle="mapbox://styles/safak/cknndpyfq268f17p53nmpwira"

    onDblClick={(handleAddClick)}
  >
    {
      pins.map(p => (
        <>
          <Marker longitude={p.long} latitude={p.lat} anchor="bottom" rotationAlignment="map" pitchAlignment="map">
            <LocationOnIcon
              style={{ cursor: "pointer" }}
              // (newUser ==={p.username} ?)
              className={(currUser) === p.username ? ' text-red-500' : ' text-violet-700'}

              // 
              onClick={() => handleMarkerClick(p._id)}
            />

          </Marker>

          {

            p._id === currentPlaceId &&
            (
              <Popup
                key={p._id}
                latitude={p.lat}
                longitude={p.long}
                closeButton={true}
                closeOnClick={false}
                onClose={() => setCurrentPlaceId(null)}
                anchor="left"
              >
                <div className=' flex-col p-1 space-y-1 '>
                  <div className=' '>
                    <p className=' font-semibold text-red-500 border-b border-red-400'>Place</p>
                    <h4>{p.title}</h4>
                  </div>

                  <div>
                    <p className=' font-semibold  text-red-500 border-b border-red-400'>Review</p>
                    <p>{p.desc}</p>
                  </div>
                  <div className=' text-yellow-400'>
                    {Array(p.rating).fill(<StarIcon />)}

                  </div>
                  <div>
                    <p className=' font-semibold  text-red-500 border-b border-red-400'>Information</p>
                    <p>Created by <b>{p.username}</b></p>
                    <p> {format((p.createdAt))}</p>
                  </div>
                </div>
              </Popup>

            )


          }
          {
            newPlace &&
            <Popup
              // key={p._id}
              latitude={newPlace.lat}
              longitude={newPlace.long}
              closeButton={true}
              closeOnClick={false}
              onClose={() => setNewPlace(null)}
              anchor="left"
            >

              <form className=' flex-col p-1 space-y-1 ' onSubmit={handleSubmit}>
                <div className=' '>
                  <p className=' font-semibold text-red-500 border-b border-red-400'>Place</p>
                  <input type='text' placeholder='Enter Place' className=' border-none  focus:outline-none ' onChange={(e) => (setNewPlaceName(e.target.value))} />
                </div>
                <div>
                  <p className=' font-semibold  text-red-500 border-b border-red-400'>Description</p>
                  <textarea placeholder='Enter Description ' className='  focus:outline-none ' onChange={(e) => (setNewPlaceDesc(e.target.value))}></textarea>

                </div>
                <div>
                  <p className=' font-semibold  text-red-500 border-b border-red-400'>Rating</p>
                  <input type="number" min={1} max={5} className=' focus:outline-none  w-full' onChange={(e) => (setNewRating(e.target.value))} />
                </div>


                <div className=''>
                  <button className=' w-full  text-white bg-red-400' type='submit'>
                    Add Pin
                  </button>
                </div>



              </form>

            </Popup>

          }
        </>)
      )}
    {currUser ?
      (<div className='absolute z-10 top-1 right-1 p-2'>
        <button className=' bg-blue-600 text-white p-2 rounded-lg w-20 m-1' onClick={logoutclick}>Logout</button>
      </div>)
      :
      <div className='absolute z-10 top-1 right-1 p-2'>
        <button className=' bg-red-600 text-white p-2 rounded-lg w-20 m-1' onClick={loginwindow}>Login</button>
        <button className=' bg-green-600 text-white p-2 rounded-lg w-20 m-1' onClick={registerwindow}>Register</button>
      </div>}

    {login &&
      <Login setCurrUser={setCurrUser} setLogin={setLogin} />
    }

    {register &&
      <Register setCurrUser={setCurrUser} setRegister={setRegister} />
    }
  </ReactMapGL>


</div>

);
}

export default App;

`

[lduchuy2002]

is that react-map-gl or react-mapbox-gl ?