Render multiple mapbox maps with svelte leads to strage behaviour (renders but not draggable)

I have this mapboxmap.svelte component (its a public token!):

<script>
  import { onMount } from "svelte";
  import mapbox from "mapbox-gl";
  //   import "mapbox-gl/dist/mapbox-gl.css";

  mapbox.accessToken =
    "pk.eyJ1Ijoicm9iaW5rb2hycyIsImEiOiJjanU5am95bm4xZnZ6NDNrOTRyYTYwdzJzIn0.iMFQgQIlhz36wB3819Xftw";

  // create map
  let map;
  onMount(() => {
    map = new mapbox.Map({
      container: "map", // container id
      style: "mapbox://styles/examples/cjgioozof002u2sr5k7t14dim", // map style URL from Mapbox Studio
    });
  });
</script>

<div id="map" />

<style lang="scss">
  #map {
    width: 400px;
    height: 400px;
  }
</style>

And I want to render it multiple times on the site. So I import the component into my App.svelte-component and “call” the component two times like this:

<script>
  import { onMount } from "svelte";
  import Mapboxmap from "./lib/maps/mapboxmap.svelte";
</script>

<Mapboxmap />
<Mapboxmap />

It does show two maps. Yet only one is working in the sense that it is draggable (this first one)

The strange this is that uncommenting this line, which imports some mapbox css

import "mapbox-gl/dist/mapbox-gl.css";

leads to the disappearing of the second map. What am I getting wrong here?