React-листовка ImageOverlay не составляет 100% высоты родителя

Question

Я хочу сделать карту с изображением.(без использования API карты)

Поэтому я использую ImageOverlay из React-leaflet.

Но это делает высоту ImageOverlay фиксированной.

Я думаю, высота и ширина изображения с "границами""attribute.

const range = 200;
<Map className="map"
          style={{
            width: 300,
            height: 300,
            padding: 0
          }}
          boxZoom={false} keyboard={false}
          animate={true}
          doubleClickZoom={true}
          center={[0, 0]} 
          zoom={0}
          maxBounds={[[-range, -range], [range, range]]}
          maxZoom={6}
          zoomControl={false}
        >

          <ImageOverlay
            bounds={[[-range, -range], [range, range]]}
            attribution='&amp;copy <a href="https://github.com/pubg/api-assets">pubg/api-assets</a> contributors'
            url={this.state.recentClickedMatch_map}
          />
            <Marker
              style={{
                width: 20, height: 20
              }}
              zIndexOffset={1000}
              position={[200,200]}
              iconSize={L.point(10, 10)}
            >
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>


        </Map>

Это код.И это изображение.

затем я изменяю Range на 100,

наконец, я изменяю диапазон на 300,

В чем проблема ??Тогда позиция маркера будет [90,200]