Map Box React JS is not working in Production

My MapBox Map is working well in development(localhost) but when I deployed the map is not loading the map.

         <ReactMapGL
            {...viewPort}
            mapboxApiAccessToken={process.env.REACT_APP_MAP_BOX_TOKEN}
            onViewportChange={setViewPort}
            // zoom={13}
            mapStyle={process.env.REACT_APP_MAP_BOX_STYLE}
            scrollZoom={true}
            touchZoom={true}
          >
            <Marker
              longitude={marker.longitude}
              latitude={marker.latitude}
              offsetTop={-20}
              offsetLeft={-10}
              draggable
              onDragStart={onMarkerDragStart}
              onDrag={onMarkerDrag}
              onDragEnd={onMarkerDragEnd}
              followUserLocation={true}
              followUserMode="course"
            >
              <Pin size={20} />
            </Marker>
            <GeolocateControl
              style={geolocateStyle}
              positionOptions={positionOptions}
              trackUserLocation
              auto
            />
            {/* <div className="nav" style={navStyle}>
              <NavigationControl showCompass />
            </div> */}
          </ReactMapGL>

I'm using react-map-gl npm package.

IN LOCALHOST(This is not my location)

IN PRODUCTION

NB: I've added Private Token and added URL also in MapBox.

ERROR MESSAGE IN CONSOLE

I JUST DOWNGRADED THE MAPBOX VERSION. NOW IT IS WORKING