Какие связанные значения использовать для простого imageOverlay на реагирующем листочке?

Question

Я пытаюсь настроить карту для этой простой интеграции с буклетами, и изображение возвращается с неправильным увеличением и смещением от центра. Должно быть, я неправильно понимаю, как работают границы и масштабирование.

Код:

<LMap style={{ height: '400px' }} center={position} zoom={14}>
  <ImageOverlay
    url="https://i.imgur.com/FwGOgaM.png"
    bounds={[[0, 0], [822, 923]]}
    attribution=""
  />
  <Marker position={position}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</LMap>

Я просто хочу, чтобы карта отображалась нормально, без искажений.