카카오 지도 닫기 가능한 오버레이 기능 구현 질문

지도/로컬 API
#1

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

저는 닫기 기능이 가능한 오버레이를 구현하고 싶은데요.
일단 제 코드를 밑에 보여드리겠습니다.
닫기 기능이 가능한 오버레이를 구현하는 코드는 displayMaker 메소드에 구현하였습니다.

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

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

    displayMaker = (map) => { // 마커와 닫기 가능한 오버레이 기능을 구현하는 함수 

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

        var content = `<div class="pharmacy-wrap">
        <div class="modal_header">
            <p style="margin: 0;">${element.title}</p><div class="close" onclick="closeOverlay()" title="닫기"></div>
            <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 ? element.roadAdress : "도로명 주소 정보가 없습니다"}</p></div><br>
            <div class="modal_addr2">(지번)<p style="padding-left: 40px; display: inline;">${element.adress ? element.adress : "주소 정보가 없습니다."}</p></div>
            <p class="modal_ph">연락처<span class="num" style="color:black">${element.tel ? element.tel : "전화번호 정보가 없습니다."}</span></p>
        </div>
        <div class="modal_footer">
            <p class="modal_p"><i class="fas fa-exclamation-triangle"></i> 전화로 약국 별 취급 의약품을 확인 후 방문하시길 바랍니다.</p>
        </div>
    </div>
      `;

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

     overlay.setMap(null)
       
     window.kakao.maps.event.addListener(marker, 'click', function() {
      overlay.setMap(map);
      
    });

      });

      }

     closeOverlay() => {
           overlay.setMap(null);     
      }

    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,   
        };

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

    setBound = (map) => {
      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))

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

      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;

이와 같이 content 변수를 선언한 뒤, overlay를 구성한다면,
onclick을 하였을 때, 실행되는 함수인 closeOverlay()에 overlay.setMap(null)에서 overlay가 undefined인데요, 이를 해결 할 방법이 있을까요??

제가 생각해본 방식은 아래의 코드를 첨부합니다.

window.kakao.maps.event.addListener(marker, 'click', function() {
  overlay.setMap(map);

  document.querySelector('.close').addEventListener("click", function(){
    overlay.setMap(null);
  })

이와 같이 하는것이였는데요.
이와 같은 방법은 첫번째 마커에서는 잘 동작하지만, 예를들어 마커를 2개 이상 클릭하였을 경우
마커 닫기 기능이 첫번째로 클릭한 마커에서만 작동하고 첫번째로 클릭한 마커에서 닫기를 누르면
모든 커스텀이 닫아진다는 문제가 있었습니다.

조언 부탁드립니다.
감사합니다.

#2

conten 변수를 선언해 html태그를 묶어서 대입하는 방식 대신에
HTML DOM createElement() Method를 이용해 content를 구현하는 방식으로 하였더니
닫기 기능이 구현되었습니다.
감사합니다.