拖动事件在 React leaflet 上不起作用

Question

在我的 React 项目中，我试图在 Leaflet map 上拖动标记后更新纬度和经度坐标。 这是我的 map 容器组件：

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles/Map.css';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
//import {MarkerIcon} from './Icon.js';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

class Mapa extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            currentLocation: { lat: -16.399, lng: -71.536 },
            zoom: 17,
        }
        this.updatePosition = this.updatePosition.bind(this);
    }

    updatePosition = (e) =>{
        e.preventDefault();
        console.log("hola");
        /*this.setState({currentLocation:e.latlng})*/
    };

    render() {
        return (
            <MapContainer center={this.state.currentLocation} zoom={this.state.zoom}>
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="© <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors" />
                <Marker position={this.state.currentLocation} draggable={true} onDragend={this.updatePosition}>
                    <Popup>{"Latitud: "+this.state.currentLocation.lat}<br /> {"Longitud: "+this.state.currentLocation.lng}</Popup>
                </Marker>
            </MapContainer>
        );
    }

}

export default Mapa;

但是拖动标记后没有任何反应，我试图更改事件的名称，但控制台上没有显示任何内容。 其他一切工作正常。 有任何想法吗？