Problem with HTML iframe when switching to MapLibre

I have developed a small web application using Plotly to display a map inside an HTML iframe.

I have prepared a small MWE using flask:

from flask import Flask, send_from_directory
import plotly.graph_objects as go
import plotly.io as pio
import json

app = Flask('test', static_folder='static')

@app.route('/')
def index():
    return send_from_directory(app.static_folder, 'test.html')

@app.route('/run')
def compute_route():
    # Coordinates for Sagrada Familia in Barcelona
    latitude = 41.4036
    longitude = 2.1744

    fig = go.Figure(go.Scattermapbox(
        lat=[latitude],
        lon=[longitude],
        mode='markers',
        marker=go.scattermapbox.Marker(
            size=14,
            color='red'
        ),
    ))

    fig.update_layout(
        mapbox_style="open-street-map",
        mapbox_center={
            "lat": latitude,
            "lon": longitude
        },
        mapbox_zoom=15,
        height=800,
        margin={
            'r': 30,
            't': 30,
            'l': 30,
            'b': 30
        }
    )

    html = pio.to_html(fig, full_html=True)

    return json.dumps({
        'html': html,
    })


if __name__ == '__main__':
    app.run(host='0.0.0.0', port='8000', debug=True)

Inside the static folder I have the following test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
    <title>Test</title>
    <style>
        iframe {
            width: 100%;
            height: 816px;
            margin: 20px 0;
            border: 1px solid #ccc;
            border-radius: 0.5em;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <iframe id="map-frame" src="about:blank"></iframe>
    <script>
        async function getData() {
            const frame = document.getElementById('map-frame');
            frame.style.display = "none";
            frame.src = "about:blank";
            try {
                const response = await fetch('/run');
                const json = await response.json();
                frame.srcdoc = json.html;
                frame.style.display = "block";
            } catch (error) {
                console.log(`Error: ${error.message}`);
            }
        }
        getData();
    </script>
</body>
</html>

Executing python3 test.py and navigating to the default page http://127.0.0.1:8000/, I see, as expected, a map showing a red dot on the Sagrada Familia, inside an iframe:

Now, if I switch from go.Scattermapbox to go.Scattermap and from go.scattermapbox.Marker to go.scattermap.Marker as instructed here, I don’t see the map anymore, even though the control elements of the Plotly UI are still present:

What’s wrong here?