Size of the map when redenring mapbox in React - node.js

Question

I trying to use mapbox GL to render a map in React.
I've diveide my screen in 4(2 col/crow) with Grid with the following css:
.container {
font-family: sans-serif;
margin: 0;
display: grid;
grid-template-rows: 1fr 7fr;
grid-template-columns: auto;
gap: 5px;
grid-template-areas: "cr1 cr2"
"cr1 cr4";
height: 100vh;
width: 200vh;
background-color: chartreuse;
}
.table {
grid-area: cr1 ;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
.tank-select {
grid-area: cr2;
background-color: grey;
}
.map {
grid-area: cr4;
display: flex;
justify-content:space-around;
align-items:stretch;
background-color: blueviolet;
}
i would like to have the map in the box cr4 with the following code:
<div className="container">
<div className="table">test</div>
<div className="tank-select">test2</div>
<div className="map">
<Map />
</div>
</div>
The map is compute this way:
const mapContainerRef = useRef(null)
const [lng, setLng] = useState(5)
const [lat, setLat] = useState(34)
const [zoom, setZoom] = useState(1.5)
// Initialize map when component mounts
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoom,
})
// Add navigation control (the +/- zoom buttons)
map.addControl(new mapboxgl.NavigationControl(), 'top-right')
map.on('move', () => {
setLng(map.getCenter().lng.toFixed(4))
setLat(map.getCenter().lat.toFixed(4))
setZoom(map.getZoom().toFixed(2))
})
// const marker = new mapboxgl.Marker().setLngLat(TankLocationArray).addTo(map)
//
map.on('load', function () {
map.addSource('route', {
type: 'geojson',
data: '../../assets/data/test.geoJSON',
})
map.addLayer({
id: 'route',
type: 'symbol',
source: 'route',
paint: {
'circle-radius': 10,
'circle-color': '#ff0000',
},
})
})
//
// Clean up on unmount
return () => map.remove()
}, []) // eslint-disable-line react-hooks/exhaustive-deps
return (
<div>
<div className="sidebarStyle">
<div>
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
</div>
</div>
<div className="map-container" ref={mapContainerRef} />
</div>
With the css:
.map-container {
position:relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sidebarStyle {
display: inline-block;
position: absolute;
top: 0;
left: 0;
margin: 12px;
background-color: #404040;
color: #ffffff;
z-index: 1 !important;
padding: 6px;
font-weight: bold;
}
When i change the map-container position from relative to absolute, the map would take the whole screen, otherwise it's not visible.
I do not know how to style to get the map to appear only in the box .map(cr4).
thanks for the help

Answer 1

solved the issue using React Map GL library.
works really fine. https://www.npmjs.com/package/react-map-gl