cannot configure example-events for react-leaflet v3 to play - react-leaflet

Question

I am trying to set up a react app for the following example https://react-leaflet.js.org/docs/example-events but cannot make it work due to compile errors. The same example in v2 works for me.
import React, {Component,useState} from 'react'
import { MapContainer, TileLayer, Marker,useMapEvents } from 'react-leaflet'
import Popup from 'react-leaflet-editable-popup'
function LocationMarker() {
const [position, setPosition] = useState(null)
const map = useMapEvents({
click() {
map.locate()
},
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return position === null ? null : (
<Marker position={position} removable editable>
<Popup>You are here</Popup>
</Marker>
)
}
class Map extends Component{
render(){
return(
<MapContainer
center={{ lat: 51.505, lng: -0.09 }}
zoom={13}
scrollWheelZoom={false}
id="mapId">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
</MapContainer>
)
}
}
export default Map;
If i don't use a class i get render underfined error. If i try to use the function does not work.
Any help would be appreciated

Answer 1

I found the issue and it's related with
import Popup from 'react-leaflet-editable-popup'
This package is not compatible with react-leaflet v3
This minor edit was crashing my example.
without this edit it works

Answer 2

try it
import React, {Component,useState} from 'react'
import { MapContainer, TileLayer, Marker,useMapEvents } from 'react-leaflet'
import Popup from 'react-leaflet-editable-popup'
function LocationMarker(props) {
const [position, setPosition] = useState(null)
const map = useMapEvents({
click() {
map.locate()
},
moveend() {
let center = map.getCenter();
let zoom = map.getZoom();
props.effectOn.setState(state => {
state.lat = center.lat;
state.lng = center.lng;
return { ...state }
});
},
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return position === null ? null : (
<Marker position={position} removable editable>
<Popup>You are here</Popup>
</Marker>
)
}
class Map extends Component{
state = {
lat: 35.76218444303944,
lng: 51.33657932281495
};
render(){
return(
<MapContainer
center={[this.state.lat, this.state.lng]}
zoom={13}
scrollWheelZoom={false}
id="mapId">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker effectOn={this}/>
</MapContainer>
)
}
}
export default Map;