1 - import 'mapbox-gl/dist/mapbox-gl.css';

2 - override css class called .mapboxgl-canvas

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

There are 2 potential issue that could prevent your map from being displayed.

1. Make sure the mapStyle from Studio mapbox and mapboxApiAccessToken are correctly paired.
2. The width and height in viewport must include units

You can start with this minimal example and then add other features that you need (such as Marker, Popup, et cetera).

import React from "react";
import ReactMapGL from "react-map-gl";

function Map() {
  const [viewport, setViewport] = React.useState({
    width: "100px", //or full width then set width: "100vw",
    height: "400px", //full height then set height: "100vh",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11
  });

  return (
    <ReactMapGL
      mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={(viewport) => setViewport(viewport)}
      {...viewport}
    ></ReactMapGL>
  );
}

export default Map;

this worked for me:

viewport: {
  width: "fit",
  ...
},

<ReactMapGL
  onViewportChange={nextViewport =>
    this.setState({ viewport: { ...nextViewport, width: "fit" } })
  }
...
>