dragend event not firing for marker react-leaflet

Question

I have a marker component in react leaflet like this

interface ElbowMarketProps {
    position: LatLng;
    updateLine: Function;
    removeElbow: Function;
}

export const ElbowMarker = (props: ElbowMarketProps): React.ReactElement  => {

    const icon = new DivIcon({className: 'line-icon'});

    return <Marker 
        draggable={true}
        eventHandlers={ 
            
            {
            dragend: (event) => {
                console.log("dragend", event); // not called
                props.updateLine(props.position, event.target._latlng) 
            }   
            
        }
    }

        zIndexOffset={10}
        position={ props.position }
        icon={ icon } 
        bubblingMouseEvents={false}
        >
    </Marker>;
}

The dragend event isn't fired, dblclick and drag work if I place them on this marker. If I update the position in the drag event the marker stops being draggable until I reclick the marker after a tiny movement. I assume this is because the marker has been redrawn and isn't the same. The index of the marker hasn't changed. How can I call a function after the marker has been dragged?

Answer 1

I ended up using the mouseup event instead of dragend, and it works perfectly.