how to push React Leaflet's attribution and map controls to the back

Question

what i'm trying to do

the user sees a map, built in React Leaflet / Leaflet.JS. The user can then click a CTA button that pops up a modal. The modal should be the "top layer" of the screen, with the website in the background.

what's wrong

the attribution tag of the React Leaflet is over the top of the modal. I can also see the controls of the React Leaflet MapContainer. See screenshot below:

what have i tried

before I did anything, the entire <MapContainer> React Leaflet component was over the top of the modal. By increasing the zIndex of my modal component to 999, the above screenshot is seen. I have attempted to add zIndex within style props, as well as its own prop to both the <MapContainer> parent element and TileLayer child element, none of which fixes:

  return (
    <MapContainer
      style={{ height: 600, width: "80%", margin: "auto" }}
      center={mapCentre}
      zoom={11}
      zIndex={-999}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
        url="https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
        zIndex={-999}
      />
      {locations}
    </MapContainer>
  );