react leaflet onMoveEnd原因错误：“超过最大更新深度”

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

const MapComponent = () => {
  const [mapCenter, setMapCenter] = useState([51.505, -0.09]);

  useEffect(() => {
    const handleMoveEnd = () => {
      // 处理地图移动结束事件
      // 更新地图中心点坐标
      setMapCenter(map.getCenter());
    };

    const map = L.map('map').on('moveend', handleMoveEnd);

    return () => {
      // 组件卸载时解绑事件
      map.off('moveend', handleMoveEnd);
    };
  }, []);

  return (
    <div id="map">
      <MapContainer center={mapCenter} zoom={13}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
};

export default MapComponent;