[React] useEffect사용하여 리랜더링 발생시 마커 찍히지 않는 문제 조언 구합니다

지도/로컬 API
#1

안녕하세요
react로 카카오 맵을 사용해 기능 구현 중에 있다가 도무지 답이 나오지않아 조언 구하려고 글을 씁니다.
newData 안에는 아래의 첨부된 사진처럼 각각 제가 각각 선택한 좌표들이 들어있는데, 이게 day객체에 맞춰서 filter된 배열들을 뿌려줍니다.
스크린샷 2022-09-22 오전 2.54.35

그래서 의존배열로 data가 바뀔때 마다 화면을 리랜더링 시켜주면서 지도에는 newData에 각각 다르게 들어있는 좌표마다 마커를 찍게끔 구현을 했다고 생각했습니다.
하지만 최초 접속시에만 정상적으로 마커가 보이고 리랜더링이 발생하면 좌표따라 화면은 움직이지만 마커는 찍히지 않는 문제가 있습니다.
setMap(null)
setPin([]) ; // 제가 구현한 좌표 state 이름
으로 초기화도 진행해봤는데 여전히 그대로라 답답한 마음에 여기에 글을 씁니다.
아래는 제가 작성한 코드 전문입니다.

-------코드--------
useEffect(() => {
console.log(data);

if (data.pin.length !== 0) {
  const container = document.getElementById("map");
  const newData = data.pin.filter((item) => item.day === nowDay);
  const options = {
    center: new kakao.maps.LatLng(newData[0].lat, newData[0].lng),
    level: 3,
  };
  const kakaoMap = new kakao.maps.Map(container, options);
  setMap(kakaoMap);

  // removeMarker();
  console.log(newData);

  newData.forEach((el) => {
    setMap(null);
    // 마커를 생성합니다
    new kakao.maps.Marker({
      //마커가 표시 될 지도
      map: map,
      //마커가 표시 될 위치
      position: new kakao.maps.LatLng(el.lat, el.lng),
      //마커에 hover시 나타날 title
      title: el.title,
    });
  });
  setMap(map);
}

}, [data]);

#2

지도는 최초 한번만 생성되게 구현해주시고
갱신되는 데이터(newData)를 상태 변수로 관리해서
데이터 값이 변경될 때마다 실행하는 훅을 1개 생성해주세요.
해당 훅에서 마커를 생성해주시면 됩니다.

리액트 예제와 아래 코드 참고 해주세요.

//갱신되는 데이터를 관리하는 상태변수
const [data, setData] = useState([]);

useEffect(() => {
    //지도객체가 생성되지 않았거나 데이터가 빈값이면 리턴
    if(!map || data.length === 0) {
        return;
    }

    data.forEach((el) => {
        // 마커를 생성합니다
        new kakao.maps.Marker({
            //마커가 표시 될 지도
            map: map,
            //마커가 표시 될 위치
            position: new kakao.maps.LatLng(el.lat, el.lng),
            //마커에 hover시 나타날 title
            title: el.title,
        });
    })
}, [map, data]);