Mapbox map not showing up (react-map-gl)

I was using this website [http://vis.academy/#/building-a-geospatial-app/1-starting-with-a-map] to learn how to visualize data using react and mapbox.gl but I ran into some problems.

I'm running the app on localhost:8080, and all I see is a blank white screen. Even though I've matched my code to vis academy's, I don't have a map.

Here is my code for the app.js (everything else was not changed, you can clone the code from their website).

import React, { Component } from 'react';
import MapGL from 'react-map-gl';
import {MapStylePicker} from './controls';

export default class App extends Component {
    state = {
      style: 'mapbox://styles/light-v9',
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
        longitude: -74,
        latitude: 40.7,
        zoom: 11,
        maxZoom: 16
      }
    };
  

  onStyleChange = (style) => {
    this.setState({style});
  }

  _onViewportChange = (viewport) => {
    this.setState({
      viewport: {...this.state.viewport, ...viewport}
    });
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize);
    this._resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this._resize);
  }

  _resize = () => {
    this._onViewportChange({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  render() {
    <MapStylePicker onStyleChange={this.onStyleChange} currentStyle={this.state.style}/>
    return (
      <div>
        <MapGL
        
          {...this.state.viewport}
          mapStyle={this.state.style}
          // Callback for viewport changes (below)
          onViewportChange={viewport => this._onViewportChange(viewport)}

        ></MapGL>
      </div>
    );
  }
}

For the mapbox token, I did what the guide told me to do, which was to go to ~/.bash_profile file and add in export MAPBOX_TOKEN="py........" and then I updated it in terminal using source ~/.bash_profile`

Further into the guide, it had two more things that exported the mapbox token so here is my code for ~/.bash_profile

# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/opt/anaconda3/bin/conda' 'shell.bash' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/opt/anaconda3/etc/profile.d/conda.sh" ]; then
        . "/opt/anaconda3/etc/profile.d/conda.sh"
    else
        export PATH="/opt/anaconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<

export MapboxAccessToken="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjZ5bWZ3YzBhNDEycWxiZHBycDFrZnoifQ.hVFCurngFTtg2R0ivt-zyg"

export MAPBOX_TOKEN="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjQ3aWJoczA4ZGQydm43cXFjcW5peTkifQ.sYJ99dX7B8QyPgV_-TszTA"

export mapboxApiAccessToken="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjQ3aWJoczA4ZGQydm43cXFjcW5peTkifQ.sYJ99dX7B8QyPgV_-TszTA"

Thank you so much for your time! I am super confused (btw i am on a mac)