카카오 맵 react sdk를 이용한 커스텀오버레이 구현중 기본 오버레이가 나오는 버그

지도/로컬 API
,
#1

안녕하세요 현재 카카오 맵 리액트 sdk를 이용해서 개발을 하고 있습니다.
리액트에 친화적인 sdk를 사용해서 커스텀오버레이를 만들었는데, 의도한 대로 스타일링한 커스텀오버레이가 잘 나오긴하는데,
지정하지도 않은 기본 infoWindow가 자꾸 따라다니고 있습니다.
혹시 이 친구를 없애는 방법에 대해서 알려주실 수 있으신가요 ?

제 소스코드는 다음과 같습니다.

 {select === el.device_pid && (
                <CustomOverlayMap
                  clickable={true}
                  position={{ lat: el.latitude, lng: el.longitude }}
                  yAnchor={1.6}
                  xAnchor={0.5}
                  zIndex={1}
                >
                  <InfoContent>
                    <Header>
                      <Mobility>{el.mobility_type}</Mobility>
                      <Id>[id - {el.seq}]</Id>
                    </Header>
                    <FirstRow>
                      <MdSizeTractor />
                    </FirstRow>
                  </InfoContent>
                </CustomOverlayMap>
              )}

이미지도 첨부하겠습니다.
스크린샷 2023-01-05 오후 6.55.08

보시면 아시겠지만 제가 스타일링한 커스텀 오버레이 밑에 이상한 녀석이 따라다니고 있습니다…

답변해주시면 감사하겠습니당

#2

첨부 코드로는 확인이 어렵습니다.
작성한 코드에서 InfoWindow를 생성하고 있는지 확인이 필요해 보입니다.
CustomOverlay를 생성하거나 지도에 보여줄 때 InfoWindow도 생성하는지 확인 부탁드립니다.

#3

문제를 확인하여 처리했습니다.
Marker 안에 자식요소로 CustomOverlay를 만들어서 나오는 문제였습니다.
저는 지금 타입스크립트 기반의 리액트로 작업을 하고있는데요.
클러스터 안에 있는 마커들을 가져오기 위해서

const ref = useRef<kakao.maps.MarkerClusterer>(null);

<MarkerClusterer
          ref={ref}
          clickable={true}
          averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
          minLevel={4} // 클러스터 할 최소 지도 레벨
          texts={(size) => size.toString()}
          calculator={Array.from({ length: data?.length ?? 0 }, (_, i) => i)}
          minClusterSize={1}
        >
... 생략
</MarkerClusterer>

위와 같이 선언해서 getMarkers() 메소드를 사용해보려고 했는데 그렇게 되지가 않네요 ㅠㅠ
혹시 더 현명하고 좋은 방법이 있을까요 ?

#4

사용하고 계신 react-kakao-maps-sdk는 공식적으로 제공하는 컴포넌트가 아니기 때문에
답변드리기 어려운 점 양해 부탁드립니다.