React Hooks로 카카오맵 구현 도중 동일한 div Element가 2개나 브라우저 상에 출력 되어 나와요

카카오맵 API (지도/로컬)
2

Hook이 호출될 때마다 지도 객체를 계속 생성하는 코드입니다.

상태 변수와 조건문을 선언해서 이전에 지도 객체가 생성되었다면
지도 생성 로직이 실행되지 않도록 코드를 수정해주세요.

아래 리액트 예제 참고해주세요.
https://codesandbox.io/s/gifted-wescoff-77nwu