카카오 지도 다중마커 오버레이 질문

지도/로컬 API
#1

안녕하세요!
항상 친절한 답변 감사드립니다.

다름이 아니라 다중 마커 오버레이를 구현하고 있는데,
최초 로딩시 마커만 나오고 클릭이벤트로 커스텀 오버레이를 구현하고 싶습니다.

그러나 최초 로딩시 모든 커스텀 오버레이가 나와서 왜 이런지 모르겠습니다.
일단 제 코드에는 overlay.setMap(map);도 하지 않았는데 말입니다…

아래의 코드와 사진을 첨부하겠습니다.
감사합니다.

캡처

import React from "react";
import './Map.css'

class MapCreate extends React.Component {
    map;
    iwRemoveable;
    MapTypeControl;
    zoomControl;
    iwContent;
  
    mapTypeControl = () => {
      this.MapTypeControl = new window.kakao.maps.MapTypeControl();
      this.map.addControl(this.MapTypeControl, window.kakao.maps.ControlPosition.TOPRIGHT);
      this.zoomControl = new window.kakao.maps.ZoomControl();
      this.map.addControl(this.zoomControl, window.kakao.maps.ControlPosition.RIGHT);
    }

    displayMaker = () => {

      const { AnimalPharmacyData } = this.props;
      AnimalPharmacyData.forEach((element) => {
        var marker = new window.kakao.maps.Marker({
            map: this.map,
            position: new window.kakao.maps.LatLng(element.lat, element.lng),
        });

        var content = `<Pharmacy_wrap class="pharmacy-wrap">
        <div class="modal_header">
            <p style="margin: 0;">${element.title}</p>
            <i class="fas fa-times" style="font-size: 50px; color: #64855C"></i>
        </div>
        <div class="modal_body">
            <div class="modal_addr">주소</div>
            <div class="modal_addr1">(도로명)<p style="padding-left: 20px; display: inline;">${element.roadAdress}</p></div><br>
            <div class="modal_addr2">(지번)<p style="padding-left: 40px; display: inline;">${element.adress}</p></div>
            <p class="modal_ph">연락처<span class="num" style="color:black">${element.tel}</span></p>
        </div>
        <div class="modal_footer">
            <p class="modal_p"><i class="fas fa-exclamation-triangle"></i> 전화로 약국 별 취급 의약품을 확인 후 방문하시길 바랍니다.</p>
        </div>
    </Pharmacy_wrap>
  `;

    var overlay = new window.kakao.maps.CustomOverlay({
        content: content,
        map: this.map,
        position: marker.getPosition()       
      });

     

   
  });

  }

    mapScript = () => {
        const { AnimalPharmacyData } = this.props;
       
        let container = document.getElementById("Mymap");
    
        let option = {
          center: new window.kakao.maps.LatLng(AnimalPharmacyData[1].lat, AnimalPharmacyData[1].lng),
          level: 3,   
        };

        this.map = new window.kakao.maps.Map(container, option);
        this.displayMaker();
        this.setBound();
        this.mapTypeControl();
    }

    setBound = () => {
      const { AnimalPharmacyData } = this.props;
        
      let bounds = new window.kakao.maps.LatLngBounds();
      

      for(var i=1; i<AnimalPharmacyData.length; i++){
        bounds.extend(new window.kakao.maps.LatLng(AnimalPharmacyData[i].lat,AnimalPharmacyData[i].lng))

      }
      // 검색된 장소 위치를 기준으로 지도 범위를 재설정

      this.map.setBounds(bounds);      
    }

  componentDidMount() {
    this.mapScript();
  }

  render() {
    const{AnimalPharmacyData} = this.props;
    console.log(AnimalPharmacyData);

    return (
    <div style={{height:"100%"}}>
      <p>MENU</p>
      <div id="Mymap" style={{ width: "100%", height: "700px" }}></div>
    </div>
    )
  }
}

export default MapCreate;
#2

map 변수 선언을 var로 한 뒤, 함수에 인수로 전달하는 코드로 변경하였더니 실행됩니다.
감사합니다!