react-map-gl Popup displaying under deck.gl layers

I'm using a react-map-gl Popup component (maplibre implementation) inside a DeckGl component, and while I can get the Popup to open, it seems to be displaying under the deck.gl layers. To illustrate what's happening vs the desired behavior, in the image below, the green border should be visible over the pink circle:

:

My component structure is as follows:

And my layer config is:

const layers = [
  new GeoJsonLayer({
    id: "PinkDotsLayer",
    data: pinkDotsGeoData,
    getPointRadius: 25,
    getFillColor: [255, 0, 255],
    pickable: true,
    onClick: handleLocationClick,
  }),
  new GeoJsonLayer({
    id: "PurpleDotsLayer",
    data: purpleDotsGeoData,
    getPointRadius: 25,
    getFillColor: [128,0,128],
    pickable: true,
    onClick: handleLocationClick,
  }),
];

I'm aware of the integration modes documentation, but I'm not quite sure how to modify my code accordingly as the provided code sample does not work for me.

How should I go about getting the Popup to display at the top-most layer?