"WebGL: context lost." error in MapLibre GL JS with Tauri

Question

I get these following errors when trying to run MapLibre GL JS in my Tauri App:

[Error] WebGL: context lost.
    getContext
    (anonymous function) (maplibre-gl.js:9404)
    (anonymous function) (maplibre-gl.js:9405)
    (anonymous function) (maplibre-gl.js:9414)
    i (maplibre-gl.js:9416)
    (anonymous function) (react-map-gl.js:838)

And the next error:

[Error] Error: Map is not supported by this browser
    (anonymous function) (react-map-gl.js:862)

I start my app with npm run tauri dev. If I use npm run dev and run the app in the browser, everything works fine.

I am aware that this might be a WebGL issue but I don't how to tackle it in a desktop app such as Tauri since I am actually from a web development background.

I use React Map GL as a wrapper on top of this library.

Any help is much appreciated. My code:

import Map from "react-map-gl";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

export default function MapLibreExample() {

    return (
        <div className="MapLibre">
            <Map
                style={{ width: "1200px", height: "70vh" }}
                mapStyle={{
                    version: 8,
                    glyphs: "http://localhost:5173/{fontstack}/{range}.pbf",
                    sources: {
                        // ...sources
                    },
                    layers: [
                        // ...layers
                    ]
                }}
                mapLib={maplibregl}
            />
        </div>
    );
}