react-leaflet - SVGOverlay how update bounds rendering after new bounds selection

Question

I'm using react-leaflet/SVGOverlay and trying rendering change bounds after OnChange selection.

In the example below, there is a blue rect component inside the SVGOverlay that follows 100% width/height according the bounds.

Although the bounds are changing after selecting OnChange, the width/height of the created SVG created with SVGOverlay remains the same - as the blue rect shows.

Notice that the orange rectangle created with the react-leaflet Rectangle component changes according the new bounds as expected.

Image with AL bounds selection: style="transform: translate3d(393px, 160px, 0px); width: 56px; height: 43px": enter image description here

Image with AC bounds selection, note the same style, what defines the bounds remains the same style="transform: translate3d(393px, 160px, 0px); width: 56px; height: 43px": enter image description here

I'm expeting that SVGOverlay could update the bounds rendering according the new bounds selected.

Is there a way to do this?

I noticed that this year there was a "Bugfix: bounds update in ImageOverlay". I don't know if the issue with SVGOverlay could be similar.

Follow code:

import { useState } from "react";
import "leaflet/dist/leaflet.css"
import {  MapContainer, TileLayer, Circle, Rectangle, SVGOverlay} from 'react-leaflet'

export default function MapsTest() {
const [bounds, setBounds] = useState([[-9.62, -36.82], [-13.29, -41.71]]);
const [UFOrigin, setUFOrigin] = useState('AL');
const handleUFOrigin = (e) => {
  const value = e.target.value;
  setUFOrigin(value);
  if (value === 'AL') {
    setBounds([[-9.62, -36.82], [-13.29, -41.71]]);
  }
  if (value === 'AC') {
    setBounds([[-8.77, -70.55], [-5.2, -39.53]]);
  }
}

return (
    <>
    <section id="maps">
    <h2>Maps</h2>
    <MapContainer className="map-container"
      center={[ -20.7801, -48]} zoom={4}>
      <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {bounds && <>
            <Circle center={bounds[0]} radius={30000} pathOptions={{ color: 'red' }} />
            <Circle center={bounds[1]} radius={30000} pathOptions={{ color: 'green' }} />
            <Rectangle bounds={[bounds[0], bounds[1]]} pathOptions={{color: 'orange'}} />

            <SVGOverlay id={"SVGOverlay"} attributes={{ stroke: 'blue' }} bounds={bounds}>
              <svg className={"innerSvg" + UFOrigin} x="0" y="0" viewBox="0 0 100 100" preserveAspectRatio="none">
              <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity={0.5} />
              </svg>
            </SVGOverlay>
      </>}
    </MapContainer>

    <div className="form-field">
    <label className="field-description">Origin</label>
        <select className="input-field"
          id="UFOrigin"
          value={UFOrigin}
          onChange={handleUFOrigin}
          name="UFOrigin">
          <option disabled>--selecione--</option>
          <option>AC</option>
          <option>AL</option>
        </select>
      </div>
    </section>
    </>
  );
}

Answer 1

Trying more tests to explore the matter, I used sessionStorage to the selection AC or AL and forced reload with window.locaton.reload();

Doing this, is not the best way to solve yet, but window.locaton.reload() forces the re-rendering (bounds are effectively changed as images below), and shows the result as expected according to the OnChange selection.

Style created by SVGOverlay to AL selection: transform: translate3d(371px, 168px, 0px); width: 56px; height: 43px;

Style created by SVGOverlay to AC selection, with re-rendering after window.locaton.reload(): transform: translate3d(43px, 117px, 0px); width: 353px; height: 41px;