React-map-gl returning gray [Vercel] - reactjs

Question

I found some error when I deploy my app in Vercel. I am displaying a map using MapBox with "react-map-gl" library, in React and Next.js.
The MapBox work fine in local but not displaying in Prod. I can see the Popup and the Markers but not the map (it only shows a gray background).
What could possibly be the problem ?
import { useState, useEffect } from 'react';
import ReactMapGL, { Marker, Popup } from 'react-map-gl';
import getCenter from 'geolib/es/getCenter';
import Image from "next/image"
import Link from "next/link"
function Map({ coordinates, marker }) {
const [viewport, setViewport] = useState({
width: '100%',
height: '100%',
latitude: coordinates.latitude,
longitude: coordinates.longitude,
zoom: coordinates.zoom
});
console.log(marker)
useEffect(() => {
let centeredCoordinate = getCenter(coordinates.length >= 1 ?
coordinates.map(result => { return { latitude: result.latitude, longitude: result.longitude } }) :
{ latitude: 47.15025576066852, longitude: 2.032816514216602, zoom: 5 })
;
if (coordinates.length > 1) {
return setViewport({
width: '100%',
height: '100%',
latitude: centeredCoordinate.latitude,
longitude: centeredCoordinate.longitude,
zoom: 5
})
}
setViewport({
width: '100%',
height: '100%',
latitude: centeredCoordinate.latitude,
longitude: centeredCoordinate.longitude,
zoom: 13
})
}, [coordinates]);
console.log(marker)
return <ReactMapGL
{...viewport}
mapStyle='mapbox://styles/kamarov/ckuiomg715hg317qly3n8zoml'
mapboxApiAccessToken={process.env.MAPBOX_KEY}
onViewportChange={(viewport) => setViewport(viewport)}
>
{coordinates.map(result => (
<div key={result.longitude}>
<Marker
longitude={result.longitude}
latitude={result.latitude}
offsetLeft={-20}
offsetTop={-10}
>
{result.entity.isPremium ?
<p className="text-xl cursor-pointer z-90">⭐</p> :
<p className="text-xl cursor-pointer z-90">📍</p>}
</Marker>
{marker?.map(mark => (
<Popup className="rounded-xl " closeButton={false} latitude={mark.latitude} longitude={mark.longitude}>
{mark.entity.isPremium ?
<div className="flex items-center p-1 justify-between space-x-2">
<div className="w-16 h-12 relative">
<Image src={mark.entity.logo} layout="fill" objectFit="contain" />
</div>
<div className="flex flex-col">
<p className="font-content text-md text-primary">{mark.entity.longName}</p>
<Link href={"/etablissements/" + mark.entity.slug}>
<a className="mr-auto text-sm text-contrast font-content underline hover:text-primary duration-300">
Voir l'établissement
</a></Link>
</div>
</div> :
<div className="flex flex-col justify-center">
<p className="font-content text-md text-primary">{mark.entity.longName}</p>
<Link href={"/etablissements/" + mark.entity.slug}>
<a className="mr-auto text-sm text-contrast font-content underline hover:text-primary duration-300">
Voir l'établissement
</a></Link>
</div>}
</Popup>
))}
</div>
))}
</ReactMapGL>
}
export default Map
I saw in other questions that the solution was to add :
/* eslint-disable import/no-webpack-loader-syntax */
import mapboxgl from 'mapbox-gl';
// #ts-ignore
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
But it's not working for me as I am using react-map-gl..
Here are the errors showing in the console of the browser in the PROD (the local browser is not showing any error)

Answer 1

Found the solution in my next.config.js I had to remove :
swcMinify: true
And it works just fine in production.