I am using mapbox to create a style & generate a key for an air bnb clone. Top right, click share (if you follow the link) is where you can get the data such as access token and style. But the darn thing wont render. It's got me puzzled.

website

full repo - the main files of concern are pages>search.js , components>Map.js & next.config.js

The particular section of code that "should" execute the code are as followed.

//Search.js page

<section className="hidden xl:inline-flex xl:min-w-[700px]">
   <Map searchResults={searchResults}/>
</section>

//Map.js

const [viewport, setViewport] = useState({
        width: '100%',
        height: '100%',
        latitude: center.latitude,
        longitude: center.longitude,
        zoom: 8
      });

    return <ReactMapGL
        mapStyle="mapbox://styles/aman-janwani/cks0lbl27149917pd1q6fvduq"
        mapboxApiAccessToken={process.env.mapbox_key}
        {...viewport}
        onViewportChange={(nextViewport) => setViewport(nextViewport)}
    >
        {searchResults.map(result => (
            <div key={result.long}>
                <Marker
                    longitude={result.long}
                    latitude={result.lat}
                    offsetLeft={-20}
                    offsetTop={-10}
                >
                    <p 
                        role="img" 
                        onClick={() => setSelectedLocation(result)} 
                        className='cursor-pointer text-2xl animate-bounce'
                        aria-label="push-pin"
                        >
                        📌
                    </p>

                </Marker>
             </div>

//next.config.js

module.exports = {
images: {
    domains: ['links.papareact.com'],
},
env: {
    mapbox_key:
      "pk.eyJ1IjoiYW1hbi1qYW53YW5pIiwiYSI6ImNrczBpM2gxbTFrcm8ydXFqamtybzJtYW8ifQ.EcMfJu_XkFN2RMfGUvX8zw"
  }
};