при изменении стейта карта не обновляется, а добавляется еще одна (react, redux, react-yandex-maps)

Такая проблема: меняю состояние currentService в другом компоненте, чтобы сработал фильтр, фильтр срабатывает, но рисуется еще одна карта, а предыдущая никуда не девается. Спасибо.

    import {useEffect, useRef} from 'react';
import {useYMaps} from "@pbe/react-yandex-maps";
import {connect} from "react-redux";

const CustomMap = (props) => {
    let mapRef = useRef(null);
    const ymaps = useYMaps(["package.full"]);
    useEffect(() => {
    if (!ymaps || !mapRef.current) {
        return;
    }
    const myMap = new ymaps.Map(mapRef.current, {
        center: [55.76, 37.64],
        zoom: 10
    });

    const objectManager = new ymaps.ObjectManager({
        clusterize: true,
        gridSize: 64,
        clusterIconLayout: "default#pieChart"
    });

    objectManager.add(props.points);
    objectManager.setFilter((object) => {
        // console.log(object.pointType + "  " + props.currentService)
        return object.pointType === props.currentService;
    })
    myMap.geoObjects.add(objectManager);

    myMap.controls.remove('typeSelector');
    myMap.controls.remove('geolocationControl');
    myMap.controls.remove('fullscreenControl');
    myMap.controls.remove('routeButton');
    myMap.controls.remove('trafficControl');
    myMap.controls.remove('searchControl');
}, [ymaps, props.currentService]);
return (
    <div ref={mapRef} style={{ width: "100%", height: "100%", position:"relative" }} >
    </div>
);
};

function makeStateToProps(state) {
  const {points, currentService} = state.commonReducer;
  return {
    points,
    currentService
  }
}
export default connect(makeStateToProps)(CustomMap);

Ответы (0 шт):