Why is the popup of the mapbox showing under (vertically not on the z-index) the map web view?

        map.addSource('unaza-goes', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'LineString','coordinates': [                        [...]                    ]                }            }        });

    map.on('click', 'unaza-goes', (e: any) => {        let popupElem = new mapboxgl.Popup()            .setLngLat(e.lngLat)            .setHTML('<p>THIS IS A POPUP</p>')            .addTo(map);    });

.map{ position: absolute; top: 0; bottom: 0; width: 100%; }.mapboxgl-popup {    max-width: 400px;    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;}body { margin: 0; padding: 0; }

I have a onclick event in my unaza-goes layer, and i want to display the appropriate popup, I am doing it the same way I have seen in several examples, but the popup seems to expand the window and show under the map web view (under as in vertically not on the z-index), do not hesitate to ask me for details because it's the first time I am working with mapbox and I could be missing something, thank you!

Image on how it looks like when the popup is triggered