[리액트] 마커 재생성시 'clustered' 이벤트리스너가 동작 안합니다

지도/로컬 API
#1

아래와같이 clustered 이벤트가 발생할때 마커를 새로 그려주는 작업을 합니다.
kakao.maps.event.addListener(clustererRef?.current, ‘clustered’, function (clusters) {…})

그리고 리액트 앱 내에서
특정 state 변화가 감지되면 기존 마커를 모두 지우고, markers를 새로 생성하여 클러스터러에 추가하도록 해놨습니다.

ex)
markers.forEach(marker => marker.setMap(null));
clusterer.clear();

// create newMarkers…

clusterer.addMarkers(newMarkers);

그러나, 이렇게 마커를 새로이 생성할때마다

addListener로 등록했던 ‘clustered’ 이벤트가 동작을 안하고,
지도를 한 번쯤 움직여야만 clustered 이벤트가 발생합니다.

그래서 지도를 조작하기 전에는 클러스터가 생성되긴하는데 디폴트 마커 클러스터링 UI가 보입니다.

마커를 지우고 새로 생성할때마다 clustered 이벤트가 발생했으면 하는데,
어떻게 해결할 수 있을까요?

#2

마커를 클러스터에 추가한 이후에 clustered이벤트를 등록하셨나요?
마커 클러스터 생성, clustered 이벤트 등록 후에 마커를 클러스터에 넣어도 동일한지 확인 부탁드립니다.

useEffect(() => {
    const container = document.getElementById("map");
    const options = {
        center: new kakao.maps.LatLng(37.48141708142644, 126.88384956908195),
        level: 14,
    }

    const m = new kakao.maps.Map(container, options);
    setMap(m);

    const clusterer = new kakao.maps.MarkerClusterer({
        map: m, // 마커들을 클러스터로 관리하고 표시할 지도 객체
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
        minLevel: 1, // 클러스터 할 최소 지도 레벨
    });

    kakao.maps.event.addListener( clusterer, 'clustered', function( clusters ) {
        console.log( clusters.length );
    });

    setCluster(clusterer);
}, []);

useEffect(() => {
    if(cluster === null) return;

    if(markers.length === 0) {
        cluster.clear();
    } else {
        cluster.addMarkers(markers);
    }
}, [cluster, markers]);