React-leafletでのImageOverLayの動的なbounds変更

Question

前提・実現したいこと

該当のソースコードの用にMapContainerの中に定義したImageOverlayのboundsを画像のサイズに応じて動的に変えようとしています。しかし、初期値に設定した値からsetBoundsを使っても画像自体のサイズに変更が起きません。

いろいろな記事を見てMapContainerのzoomやcenterなどは後から変更できることが分かりましたが、ImageOverLayの値を変更することができるのか否かがわかりませんでした。

該当のソースコード（一部）

const [bounds, setBounds] = useState([
    [-128, -128],
    [128, 128],
  ]);

<MapContainer zoom={1} center={[0, 0]}>
    <ImageOverlay url={url} bounds={bounds} />
    <SetBounds />
</MapContainer>

Answer 1

https://react-leaflet.js.org/docs/api-components/#mediaoverlay-behavior

const bounds = new LatLngBounds([40.712216, -74.22655], [40.773941, -74.12544])

<ImageOverlay
  url="http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
  bounds={bounds}
  opacity={0.5}
  zIndex={10}
/>

LatLngBoundsクラスのオブジェクトを渡す必要があるようです