React map gl NavigationControls not showing on page

Question

I think it might be a css issue, the docs state: Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. What stylesheet would this be exactly?

import React, { useState } from 'react';
import ReactMapGL, { Marker, Popup, NavigationControl } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import env from '../env';

const NFTMapLayoutOne = () => {
    const [viewport, setViewport] = useState({
        latitude: 38.57,
        longitude: -121.47,
        width: '100vw',
        height: '100vh',
        zoom: 1,
    });


    const navControlStyle = {
        right: 100,
        top: 200,
    };

    const geoSuccess = (pos) => {
        let crd = pos.coords;

        setViewport({
            latitude: crd.latitude,
            longitude: crd.longitude,
            width: '100vw',
            height: '100vh',
            zoom: 8,
        });


    const nearMeHandler = () => {
        navigator.geolocation.getCurrentPosition(geoSuccess);
    };


    return (
        <div>
            <ReactMapGL
                {...viewport}
                mapboxApiAccessToken={env.MAPBOX_TOKEN}
                onViewportChange={(viewport) => setViewport(viewport)}
            >
                <NavigationControl style={navControlStyle} />
            </ReactMapGL>
        </div>
    );
};

export default NFTMapLayoutOne;

Answer 1

The docs shows this:

<NavigationControl style={navControlStyle} />

In order to actually show on the page I wrapped it in a div

<div style={navControlStyle}>
    <NavigationControl />
</div>