Mouse/touch event problem with deck.gl layers and react-map-gl overlays

Question

I'm writing a web app using react-map-gl and deck.gl, and my challenge is to get the mouse events set up correctly.

If I use react-map-gl on top of deck.gl, deck.gl layers don't receive my mouse events, and if I do it the other way around, react-map-gl layers don't receive the events.

Here is a simplified list of layers/overlays I'm using (from bottom up):

1. react-map-gl base map (using the MapGL react component)
2. deck.gl with a PathLayer for displaying a track of where I've sailed
3. react-map-gl Canvas overlay for displaying a sailboat location marker including boat speed, wind speed etc
4. react-map-gl HTML overlay for placing clickable image thumbnails on the track

<MapGL
    {...this.state.viewState}
    onViewportChange={viewport =>
        this.setState({ viewState: viewport, panning: true })
    }
    mapboxApiAccessToken="...">
    <DeckGL
        viewState={this.state.viewState}
        controller={false}
        layers={this.getLayers()}
    />

    <CanvasOverlay redraw={this._redrawCanvasOverlay} />

    <HTMLOverlay
        redraw={this._redrawHTMLOverlay}
    />
    ...

If I arrange them like above, the clickable image thumbnails work but the deck.gl PathLayer doesn't receive any mouse information.

If I do it the other way around and put MapGL as a child of DeckGL, the PathLayer gets the events ok, but I can't click the image thumbnails anymore.

What would be the correct way to put together this so that both react-map-gl and deck.gl would allow interactivity?