React-map-gl with mapbox on NodeJS map -- map is not showing up

Question

I was following a youtube tutorial and followed the steps exactly, however, my map does not seem to work. I get a blank screen even when I put my own access token in. Ive tried following other tutorials and I get the same issue. When I go on the react-map-gl website and follow their example, it also does not work. I have tried debugging this for hours and I would really appreciate any advice on how to proceed. For reference here is my code:

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

function App() {
    const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 37.7577,
        longitude: -122.4376,
        zoom: 8
    });

  return (
    <div className="App">
        happy
        <ReactMapGL
        {...viewport}
        mapboxAccessToken ={'pk.eyJ1IjoiZGFuaXlhbG1vaGEiLCJhIjoiY2wyNnBsdHpnMDF0YTNqc2VibTd2OGhhcSJ9.ASJaKcGz1eIhWr38-askQQ'}
        onViewportChange={nextViewport => setViewport(nextViewport)}
        />
        sad
    </div>
  );
}

export default App;

---

and here is what I see on my screen:

what I can see on my screen