카카오 맵 react에서 zoom사용시 잔상남는현상

아래 코드로 실행후 zoom을 바꿀때마다 뒷배경에 잔상이 남습니다…
카카오 예제에 보면 zoom변경시 뒷배경이 깔리던데, 제 코드에 문제가 있는걸까요??

아래는 지도 컴포넌트입니다

const MapComponent = () => {

const [x, setX] = useState(33.450701);

const [y, setY] = useState(126.570667);

useEffect(() => {

const kakao = (window as any).kakao;

const container = document.getElementById("map");

const center = new kakao.maps.LatLng(x, y);

const options = {

  center: center,

  level: 3,

};

const map = new kakao.maps.Map(container, options);

return () => {};

}, [x, y]);

return <div id=“map” style={{ width: 800, height: 800 }}>;

};

x, y 값이 변경될 때 지도를 계속 생성하는 로직으로
지도가 1개 이상 중복생성이 돼서 줌을 해도 지도가 밑에 깔려있는 현상으로 보입니다.
지도는 최초 1번 생성해 주시고, x, y가 변경되면 지도의 중심좌표를 재설정하는 방향으로 수정해서 확인 부탁드립니다.