карта листовки с перекрытием контейнера

Question

Итак, я пошел листать документацию и скопировал вставленный пример, который нашел там, чтобы увидеть, может ли карта воспроизвести, однако, не только карта разбита, но и перекрывает контейнер, в котором она находится. Я попытался дать .leaflet-container исправлено значения ширины и высоты, но они даже не распознаются.

Итак, мой вопрос: есть ли что-то, чего мне не хватает.

пример компонента листовки

import 'leaflet/dist/leaflet.css';
export default class LeafletMap extends Component {
    constructor() {
        super()
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
  }
    render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

Он импортируется как

<div className="hotel_description_card_right">
   <div className="hotel_description_card_right_container">

       <LeafletMap /> // here

   </div>
</div>

как он смотрит сейчас