Обработка ENV не работает в NextJS и Mapbox

быстрый вопрос. Я пытаюсь использовать NextJS с Mapbox, и у меня возникла странная проблема с обработкой env с помощью Next.

Итак, у меня есть файл .env.local с несколькими переменными:

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

Теперь, когда я вызываю эти переменные в чем-нибудь еще, кроме Mapbox, они работают нормально. Однако, если я попытаюсь вызвать его в mapbox, как показано ниже:

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

Не работает. Как ни странно, если я вызываю console.log в этой функции, он действительно возвращает правильную строку env и не говорит undefined. Так что я в полной растерянности и надеюсь, что некоторые из вас могут помочь. Я провел небольшое расследование здесь, на SO, и увидел другого человека с этой ошибкой, говорящего, что dotenv испортил обработку, но у меня нет dotenv, установленного в этом проекте (Переменная среды не работает с токеном Mapbox на NextJS).

Спасибо!