Basic DeckGL map with controller buttons in React

Question

I am trying to get a basic DeckGL example working.

What should I do to see control buttons like image below? It is just taking too much time so decided to ask the SO community.

import React from 'react';
import DeckGL from 'deck.gl';
import { StaticMap } from 'react-map-gl';

// Initial viewport settings
const initialViewState = {
    longitude: 170.6362,
    latitude: -44.1321,
    zoom: 6,
    pitch: 55,
    bearing: 0
};
const MAPBOX_ACCESS_TOKEN = 'pk.xyz';

export default class App extends React.Component {

    render() {
        return (
            <DeckGL
                controller={true}
                initialViewState={initialViewState}

            >
                <StaticMap
                    mapStyle="mapbox://styles/mapbox/dark-v9"
                    mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
            </DeckGL>
        );
    }
}

Hopefully assisting someone who can spot the issue, here is a ticket from Deck's GH issues.

Answer 1

import React from 'react';
import DeckGL from 'deck.gl';
import StaticMap, { NavigationControl } from 'react-map-gl';
const initialViewState = {
  longitude: -1.6362,
  latitude: 53.8321,
  zoom: 10,
  pitch: 55,
  bearing: 0,
}

export default class App extends React.Component {

  render() {
    return (
      <DeckGL
        //changing viewport is another question's code.
        initialViewState={initialViewState}>
        <StaticMap>
          <div className='mapboxgl-ctrl-bottom-right'>
            <NavigationControl 
              onViewportChange={viewport => this.setState({ viewport })} />
          </div>
        </StaticMap>
      </DeckGL>
    );
  }
}

This is the full clean code. For some reason codesandbox.io does not find deck.gl to add as dependency. Will create a basic repo and link it here.