"Improve this map" message displaying outside map - mapbox

Question

I followed this tutorial to get a basic map layout set up in React.
After completing it, the "Improve this map" message was constantly outside the map as opposed to the bottom edge: Screenshot
My App.js:
import './App.css';
import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
function App() {
mapboxgl.accessToken = 'pk.eyJ1IjoiZmxpZ2h0bWF4IiwiYSI6ImNsZG44enF1bTA2MzIzb3BmZ3FkZHRkcGYifQ.NV8NYyQ01-CLAYGQR_tqBg';
const mapContainer = useRef(null);
const map = useRef(null);
const [lng, setLng] = useState(-6.26);
const [lat, setLat] = useState(53.34);
const [zoom, setZoom] = useState(8);
useEffect(() => {
if (map.current) return; // initialize map only once
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/streets-v12',
center: [lng, lat],
zoom: zoom
});
});
useEffect(() => {
if (!map.current) return; // wait for map to initialize
map.current.on('move', () => {
setLng(map.current.getCenter().lng.toFixed(4));
setLat(map.current.getCenter().lat.toFixed(4));
setZoom(map.current.getZoom().toFixed(2));
});
});
return (
<div className="App">
<div className="sidebar">
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
</div>
<div ref={mapContainer} className="map-container" />
</div>
);
}
export default App;
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.map-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 50%;
}
.sidebar {
background-color: rgba(35, 55, 75, 0.9);
color: #fff;
padding: 6px 12px;
font-family: monospace;
z-index: 1;
position: absolute;
top: 0;
left: 0;
margin: 12px;
border-radius: 4px;
}
Any ideas?
I tried using other tutorials, other styling options, but the message is constantly outside the map.

Answer 1

Silly mistake, forgot to add
import 'mapbox-gl/dist/mapbox-gl.css'