React MapLibre can't render country layer [closed]

I'm using Maplibre and Open Street Maps and trying to generate a map following this tutorial: https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/.

My issue is that I cannot see the map. I can the see the marker and can interact with the map by panning and zooming in and out, but the countries and other details do not render even though I have a valid API key.

Here is what I see:

Here is what I should see (screenshot taken from the tutorial because I cannot generate it myself):

I am not receiving any errors or warnings in the console. If I look in the inspector, I can see that my API call succeeded and returned the style data. I have attempted to debug using other map styles to no avail, all producing the same output (no errors or warnings, successful API call, a blank map with a marker than I can pan and zoom in/out). Is there something else I need to install?

I am using:

[email protected] [email protected].

map.js:

import React, { useEffect, useRef } from 'react'; import maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; import './map.css'; export default function Map() { const mapContainerRef = useRef(); const apiKey = '<my api key>'; useEffect(() => { const map = new maplibregl.Map({ container: mapContainerRef.current, style: `https://api.maptiler.com/maps/streets/style.json?key=${apiKey}`, center: [139.753, 35.6844], zoom: 14 }); map.addControl(new maplibregl.NavigationControl(), 'top-right'); new maplibregl.Marker({color: "#FF0000"}) .setLngLat([139.7525,35.6846]) .addTo(map); return () => { map.remove(); } }, []); return ( <div className="map-wrap"> <a href="https://www.maptiler.com" className="watermark"> <img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo" /> </a> <div ref={mapContainerRef} className="map" /> </div> ); }

map.css:

.map-wrap { position: relative; width: 100%; height: calc( 100vh - 77px ); /* calculate height of the screen minus the heading */ } .map { position: absolute; width: 100%; height: 100%; }