ENV processing not working in NextJS & Mapbox

Question

quick question. I'm trying to use NextJS with Mapbox and having a weird issue with the env processing with Next.

So I have a .env.local file with a few variables:

DATABASE_URL="file:./dev.db"
WP_API_URL=
MAPBOX_KEY=

Now anytime I call these variables in anything else except for Mapbox they work fine. However, if I try to call it in mapbox like the following:

export default function Map() {
  const [viewport, setViewport] = useState({
    width: "50%",
    height: "50%"
  });

  return (
   
        <ReactMapGL
          mapboxApiAccessToken={process.env.MAPBOX_KEY}
          mapStyle="mapbox://styles/mapbox/outdoors-v11"
          {...viewport}
          onViewportChange={(nextViewport) => setViewport(nextViewport)}
        ></ReactMapGL>
    
  );
}

It doesn't work. Strangely, if I call a console.log in that function it does return the right string of the env and doesn't say undefined. So i'm at a total loss and hoping some of you can help. I did some investigation here on SO and saw another person with this error saying that dotenv messed with the processing, but I don't have dotenv installed in this project (Environment variable not working with Mapbox token on NextJS).

Thanks!