after clicking on map it changes center of the map

[VardgesHA777]

I am using react-leaflet version 4, and installed leaflet-measure, but when i clicked [Create a new measurement] and then clicked on Map my map center has been changed.

import { useEffect } from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import * as L from "leaflet";
import "leaflet-measure";
import '../../components/LeafletRuler/leaflet-ruler.css'
import "leaflet/dist/leaflet.css";

const Map = () => {
const position = [51.505, -0.09];

function MeasureControl() {
    const map = useMap();

    useEffect(() => {
        let measureControl = new L.Control.Measure({
            position: 'topright',
            lineColor: 'blue'
        });
        map.on('measurefinish', function(evt) {
            console.log('this is measurement area')
            console.log(evt)
        });
        measureControl.addTo(map);
    }, []); // Add the control when the map reference changes

    return null;
}

return (
    <div>
        <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <MeasureControl />
        </MapContainer>
    </div>
);

};

export default Map;

[HugoP27]

I also started having this issue with the new leaflet version, have you managed to find a solution yet?

[emilhe]

I am also having this issue. Any solution found?

EDIT: A workaround was posted here.

[HugoP27]

#171 has a workaround