Tamaño del mapa al representar mapbox en React.

Estoy tratando de usar mapbox GL para renderizar un mapa en React.
He dividido mi pantalla en 4 (2 col/crow) con Grid con el siguiente 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;
}

Me gustaría tener el mapa en el cuadro cr4 con el siguiente código:

  <div classname="container">
      <div classname="table">test</div>
      <div classname="tank-select">test2</div>
      <div classname="map">
        <map></map>
      </div>
    </div>

El mapa se calcula de la siguiente manera:

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>
    </div>

Con el 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;
  }

Cuando cambio la posición de map-container de relative a absolute, el mapa tomará toda la pantalla, de lo contrario, no será visible.

No sé cómo hacer un estilo para que el mapa aparezca solo en el cuadro map (cr4).
Gracias por la ayuda.