How can I get my Modal in Leaflet to appear in front of the map?

Question

I am using leaflet to display a map of Jamaica which should prompt a modal to pop up once the user clicks on one of the parishes (states). Currently the modal appears behind the map once a parish is clicked.

Below I have placed the react code.

const center = [18.19368269899244, -77.39527725784035];


export default function App() {
  const [show, setShow] = useState(false)
  return (
    <MapContainer
      center={center}
      zoom={9}
      style={{ width: '100vw', height: '100vh' }}
    >
      <TileLayer
        url="https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=73p7aIRQ0vUQYQlwBn1Q"
        attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
      />
      {
        parishesData.features.map((parish) => {
          const coordinates = parish.geometry.coordinates[0].map((item) => [item[1], item[0]]);
          console.log(parish.properties.name, coordinates)
          const color = (d) => {
            return d > 1000 ? '#800026' :
                   d > 500  ? '#BD0026' :
                   d > 200  ? '#E31A1C' :
                   d > 100  ? '#FC4E2A' :
                   d > 50   ? '#FD8D3C' :
                   d > 20   ? '#FEB24C' :
                   d > 10   ? '#FED976' :
                              '#FFEDA0';
          }
          
          return (<Polygon
            pathOptions={{
              fillColor: color(parish.properties.density),
              fillOpacity: 0.7,
              weight: 2,
              opacity: 1,
              dashArray: 3,
              color: 'white'
            }}
            positions={coordinates}
            eventHandlers={{
              mouseover: (e) => {
                const layer = e.target;
                layer.setStyle({
                  dashArray: "",
                  fillColor: "#BD0026",
                  fillOpacity: 0.7,
                  weight: 2,
                  opacity: 1,
                  color: "white",
                })
              },
              mouseout: (e) => {
                const layer = e.target;
                layer.setStyle({
                  fillOpacity: 0.7,
                  weight: 2,
                  dashArray: "3",
                  color: 'white',
                  fillColor: color(parish.properties.density),
                });
              },
              click: (e) => {
                const layer = e.target;
                setShow(true);
                console.log("zoom to", parish.properties.name);
              }
            }}
          />)
        })
      }
      <div className='login-modal'>
        <button onClick={()=>{
          console.log("button pressed")
          setShow(true)
          }}>Show Modal</button>
        <Modal show={show} title ="Logins" onClose={()=> setShow(false)}>
          <div className='modal-body'>Logins go here</div>
          <div className='modal-body'>Logins go here</div>
        </Modal>
      </div>
    </MapContainer>
    
        );
}

I have tried changing the z-index of the MapContainer and the login modal div but the modal still appeared behind the map. Additionally I have a button that is appearing at the top left of the screen behind the map. How do I get these elements to show on top of the map where I have it zoomed in?