depthTest for deck.gl's paths and 3D map rendered by mapbox

[ImanEmadi]

long story short,
if we are using the reversed control to render 3D map and have deck.gl paths and icons over it. (assume we want deck.gl to be the parent component):

    <DeckGL
      initialViewState={{
        longitude: 0.45,
        latitude: 51.47,
        zoom: 11
      }}
      parameters={{depthTest:true}}
      controller>
      <Map
        initialViewState={{
          latitude: 32.6141,
          longitude: -114.34411,
          zoom: 14,
          bearing: 80,
          pitch: 80
        }}
        maxPitch={85}
        mapStyle="mapbox://styles/mapbox/satellite-v9"
        mapboxAccessToken={TOKEN}
        terrain={{source: 'mapbox-dem', exaggeration: 1.5}}
      >
        <Source
          id="mapbox-dem"
          type="raster-dem"
          url="mapbox://mapbox.mapbox-terrain-dem-v1"
          tileSize={512}
          maxzoom={14}
        />
        <Layer {...skyLayer} />
      </Map>
     {children}
    </DeckGL>

and children are deck.gl's PathLayer, IconLayer, Polygon and etc... as react components.
the problem is providing depthTest to deck.gl doesn't affect how paths and icons appear over the 3D map rendered by mapbox, paths are still visible behind the mountains. or if a path or polygon are partially under the ground, they are still visible.

how can we have the depthTest enabled, when map is rendered by the mapbox and deck.gl is the parent component?

[Pessimistress]

The reverse controlled pattern renders deck.gl canvas over the Mapbox canvas. They do not share the same depth context.

The only pattern that supports depth blending/3D occlusion is MapboxOverlay with interleaved: true.

[ImanEmadi]

then will i still be able to define onHover and onClick for my paths and icons which are rendered by deck.gl ?
is there a guide or examples of how events can be handled when using this overlay ?

[Pessimistress]

Pointer events are supported by all integration modes.

http://deck.gl/docs/developer-guide/base-maps/using-with-mapbox#integration-modes

[ImanEmadi]

Thanks a lot for your replies.
if you don't mind, one more question.
I am currently having all my deck.gl elements as React components, like along with some non-deck.gl components.
is it somehow possible to have these layers passed to this mapboxOverlay with react-syntax or they have to be converted to the class instantiation syntax like new PathLayer({}) and be passed to layers={} prop ?

Thanks.

[Pessimistress]

https://deck.gl/docs/api-reference/react/deckgl#jsx-layers