google maps iframe is above everything

i can change the z-index of the map but it will still going above my modal but idk why if anyone know what i need to change ill take it.

<ContentSection title="Localisation">
                class="w-full relative z-0"
                style="height: 450px"
function initMap(context) {
  return () => {
    const lat = parseFloat(;
    const lng = parseFloat(context.el.dataset.lng);
    const center = { lat: lat, lng: lng };

    var map = new google.maps.Map(context.el, {
      center: center,
      zoom: 18,

    var cityCircle = new google.maps.Circle({
      strokeColor: "#fe7d56",
      strokeWeight: 2,
      fillColor: "#ffcbbb",
      map: map,
      center: center,
      radius: 50,