Leaflet map is unaffected by Z-index, interferes with overlayed DOM events

I am trying to add a UI to my website that overlays the leaflet map. I want to do this without using position: fixed for the overlay. Instead, I want to fix the map to the background of the screen and then put my overlay as usual.

The issue is that, regardless of how I change the z-index, the leaflet map is always above the context I overlay onto it. This is also an issue for any UI elements i put overtop of the map which rely on grab or scroll events.

https://codesandbox.io/p/sandbox/leaflettest-f97lpf?file=%2Fsrc%2FApp.js

In this example, I am trying to put a div over top of the leaflet map. However, the leaflet map is unaffected by the z-index.

import "./styles.css";
import { MapContainer } from "react-leaflet/MapContainer";
import { TileLayer } from "react-leaflet/TileLayer";
import "leaflet/dist/leaflet.css";

export default function App() {
  return (
    <>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          height: "100%",
          width: "100%",
          zIndex: 1,
        }}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        />
        <div className="Main-UI-Container">
          <p>Content Here</p>
        </div>
      </MapContainer>
    </>
  );
}

With CSS:

.Main-UI-Container {
  background: fixed;
  z-index: 9999;
  background-color: #efefef;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}