реагирующий маркер листовки с багом вызывает петлю

Я использую react-Leaflet, и мне нужно несколько маркеров со значком, но всякий раз, когда я использую onMoveEnd на своей карте и setState что-то, это вызывает зацикливание и ошибки.

Кроме того, когда я использую onDragEnd вместо onMoveEnd, проблема с петлей исчезает, но я больше не могу drag туда, куда хочу.

const onMapMoveEnd = (e) => {
    setCenter(e.target.getCenter())
}


<Map ref={mapRef} onMoveend={(e) => onMapMoveEnd(e)}>

    markers.map( (mark, index) => <MarkerWithBadge markerIcon={myIcon}  position={position}>
    {index}
    </MarkerWithBadge>
    )

const MarkerWithBadge = props => {
  const initMarker = ref => {
    if (ref) {
      const popup = L.popup().setContent(props.children);
      ref.leafletElement
        .addTo(ref.contextValue.map)
        .bindPopup(popup, {
          className: "badge",
          // closeOnClick: false,
          autoClose: false
        })
        .openPopup()
        // prevent badge from dissapearing onClick
        .off("click");
    }
  };
  return <Marker ref={initMarker} {...props} />;
    };

    export default MarkerWithBadge;