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

the issue gets fixed after adding the mapbox css style to the html file:

<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
  rel="stylesheet"
/>

it worked for me!