Dataset에 이미지주소를 넣어 여러개의 마커 처리하는 방법

이미지주소를 넣어 인포윈도우에 삽입하고 싶습니다.
여러 개의 마커가 있을 때, 이미지 주소 처리를 한 번에 하기 위해
dataset를 구성하고,
const dataSet = [
{
title: “빨강-병변”,
address: “서울 노원구 상계동 651.”,
imgurl: “https://i0.wp.com/ipari.kr/wp-content/uploads/2022/10/red_lesion-scaled.jpg?fit=1682%2C2560&ssl=1”,
category: “빨강”,
}]

return `
  <div class="infowindow">
      <div class="infowindow-img-container">
        <img
          src="https://img.youtube.com/vi/${imgurl}/mqdefault.jpg"
          class="infowindow-img"
        />
      </div>
      <div class="infowindow-body">
        <h5 class="infowindow-title">${data.title}</h5>
        <p class="infowindow-address">${data.address}</p>
        <a href="${data.url}" class="infowindow-btn" target="_blank">사이트 이동</a>
      </div>
    </div>
  `;
}

이렇게 처리하려고 하는데요. 그러면 콘솔창에 imgurl이 정의되어 있지 않다고 뜹니다… 문제가 뭘까요?

dataSet의 0번째의 imgurl에 접근할 수 있게 dataSet[0].imgurl로 수정하면 될 것 같습니다.
다만 인포윈도우와 커스텀 오버레이는 컴포넌트로 content를 설정할 수 없습니다.
아래 답변 참고해주세요.
https://devtalk.kakao.com/t/react-customoverlay-cors/101995/2
https://devtalk.kakao.com/t/topic/105513/5