Управление навигацией с помощью Deck.gl

Я пытаюсь создать рынок nft поверх mapbox, например ovr.ai, чтобы улучшить свой react.js. Я работаю над форком, но пытаюсь добавить новые функции, такие как управление навигацией, место поиска и т. д.

У меня проблема с NavigationControl.

import DeckGL from "@deck.gl/react"
import ReactMapGL, { NavigationControl } from "react-map-gl"

return (
    <DeckGL
      style = {{ position: "relative" }}
      height = {HEIGHT}
      width = {WIDTH}
      initialViewState = {viewState}
      onViewStateChange = {({ viewState }) => setViewState(viewState)}
      controller = {true}
      layers = {layers}
    >
      <ReactMapGL mapboxApiAccessToken = {token}>
        <NavigationControl />
      </ReactMapGL>
    </DeckGL>
  )

Код генерирует управление навигацией, но во-первых; Я не могу щелкнуть их, потому что Deckg создает холст поверх них. Даже если я удаляю холст из проверки, управление масштабированием кажется неработающим.

https://codesandbox.io/s/cocky-forest-iv6bi2?file=/src/Map/index.js