OpenLayers ol-overlaycontainer-stopevent div blocking canvas input

I've created a very basic map with OpenLayers inside of a react component's componentDidMount method:

var tileSource = new source.XYZ({ url: "http://localhost:5000/Tiles/GetTile/{x}/{y}/{z}", minZoom:5, maxZoom: 18 });
var tileLayer = new TileLayer({ source: tileSource });

var options = { controls: [] };

//initialise and populate the map
this.Map = new Map(options);

this.Map.addLayer(tileLayer);
this.Map.setView(new View({ center: [-28.613, 25.225], zoom: 5, minZoom:5, maxZoom: 18 }));
this.Map.setTarget(this.MapDiv);

In my render event I have the target element for the OpenLayers map:

return (
        <div style={{ height: "100%" }}>
            <div className="openlayers-map" ref={(el)=> this.MapDiv = el}></div>
        </div>
    )

This works well enough and the map renders fine, but none of the inputs (panning, zooming etc) with the mouse are working and the map is fixed in place. I've done some digging and found out that this element

<div class="ol-overlaycontainer-stopevent" style="position: absolute; z-index: 0; width: 100%; height: 100%;"></div>

is consuming all of the mouse input events. If I forcefully delete the element using the browser's inspector, I regain control of the map and panning and zooming starts working again.

My understanding is that it is used for overlays (I'm guessing to prevent interactions with the overlay to effect the map). But I haven't added any overlays to my map, it seems that it shouldn't be there.

Does anyone know why this element is there and how to prevent it from interfering with my map?