Deckgl Wrapper Covering map Preventing Map Interaction

Question

I'm working on a fairly basic implementation of Deckgl with ReactMapGl. I'd like to render a polygon overlay that outlines an array of coordinate and I'm following the documentation as well as examples that I found online. Unfortunately in my current implementation the Deckgl Wrapper div covers the entire map preventing the user from being able to interact with it. See Codesandbox example here:

https://codesandbox.io/s/react-map-5dnkoz

const data = [
  {
    contour: [
      [-86.83446165702009, 36.17150121813963],
      [-86.8287327938404, 36.15548883458097],
      [-86.85771573862695, 36.15235867540224],
      [-86.84962906703987, 36.139957124954705],
      [-86.86694827924185, 36.1401699318269],
      [-86.86802690445148, 36.15681345538646],
      [-86.88323041951918, 36.16074825898015],
      [-86.86222486725711, 36.17675839228444],
      [-86.8486865848925, 36.16747822232059],
      [-86.83960001512133, 36.166995304396785],
      [-86.83446165702009, 36.17150121813963]
    ]
  }
];

const layer = new PolygonLayer({
  id: "polygon-layer",
  data,
  pickable: false,
  stroked: true,
  filled: false,
  lineWidthMinPixels: 2,
  getPolygon: (d) => d.contour,
  getLineColor: [85, 119, 242]
});

export default function IndexPage() {
  const viewport = {
    latitude: 36.139691,
    longitude: -86.803268,
    zoom: 11
  };
  return (
    <div>
      <Map
        initialViewState={viewport}
        style={{ width: 800, height: 600 }}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={
          "pk.eyJ1IjoicGhpbGZlbGl4IiwiYSI6ImNrZTdsc3FkZzA4b3IyeWswbHhueTRkb28ifQ.MtAPCLJVyCsMHIDuXTbQGQ"
        }
      >
        <DeckGL viewState={viewport} layers={[layer]} />
        <Marker longitude={-86.803268} latitude={36.139691} color="red" />
      </Map>
    </div>
  );
}