El componente muestra una pantalla en blanco.

Estaba siguiendo el video del canal de YouTube de lama dev para usar mapbox en reactjs.
Pero cuando ejecuto el script de reactjs, mi componente de mapa está vacío.

Video:

Código fuente:
https://github.com/safak/youtube/tree/mern-travel-app

Mi código

import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function App() {

const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 46,
    longitude: 17,
    zoom: 8,
  });

return (
    <div classname="App">
      <reactmapgl {...viewport}="" mapboxapiaccesstoken="{process.env.REACT_APP_MAPBOX}" onviewportchange="{nextViewport" ==""> setViewport(nextViewport)} 
    />
    </reactmapgl></div>
  );
}

export default App;

Seguí la codificación y en la parte de react, creé el archivo .env, instalé e importé react-map-gl y utilicé . Por alguna razón, solo veo una pantalla en blanco en lugar de un mapa.
Probé el código de ejemplo de la biblioteca de Uber visgl.github.io, también el código fuente que has proporcionado, pero la pantalla seguía en blanco.

Seguí estas soluciones:

https://stackoverflow.com/questions/65434964/mapbox-blank-map-react-map-gl-reactjs
https://stackoverflow.com/questions/38111157/react-map-gl-map-does-not-appear
https://stackoverflow.com/questions/70424632/map-not-showing-up-when-using-react-map-gl-and-create-react-app/70425618

Pero aún así, el componente está vacío.

Cualquier ayuda sería útil, ¡gracias!

EDIT 1:
Encontré este error en la consola de Firefox:
An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling