React 에서 useEffect 사용하여 component 단에서 kakao map 띄우기

import React, { useEffect } from 'react';
import EmptyImage from 'styles/images/sample_photo.jpg'

const { kakao } = window;
const KakaoInfo = ({lat, lng}) => {

    useEffect(() => {
        const container = document.getElementById('map');
        const options = { 
            center: new kakao.maps.LatLng(lat, lng), // 로드시 중심좌표
            level: 3,
            scrollwheel: false, // 스크롤 방지
            draggable: false, // 드래그 방지
            disableDoubleClickZoom: true // 더블클릭 방지
            
        };
        const map = new kakao.maps.Map(container, options);
		// custom 한 이미지 파일 로드
        const customOverlay = new kakao.maps.CustomOverlay({
            position: new kakao.maps.LatLng(lat, lng),
            content: `<div class=""><img src=${EmptyImage} alt=""/></div>`,
            xAnchor: 0.5,
            yAnchor: 1,
            zIndex: 3,
            map: map,
        });
        customOverlay.setMap(map); 
    }, [lat, lng]);

    return (
        <React.Fragment>
          <div id="map" style={{height: '100%'}}></div>
        </React.Fragment>
    );
}

export default KakaoInfo;