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

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 });

// 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;

alex3165 / react-mapbox-gl

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