NavigationControl with Deck.gl

I'm trying to build nft marketplace over mapbox, like ovr.ai to improve my react.js. I'm working on a fork, but I'm trying to add new features like navigation control, search place etc.

I have a problem with 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>
  )

Code generates navigation control but firstly; I can't click them because deckgl generates canvas over them. Even I remove canvas from inspect, zoom control seems not working.

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

As docs suggest here, try adding the react-map-gl context provider to your DeckGL component