React 카카오맵 렌더링이 안 돼요 도와주세요

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

import { useEffect } from 'react';

const { kakao } = window;

const KakaoMap = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(37.55605010732486, 127.00496835047365),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);
    const markerPosition = new kakao.maps.LatLng(
      37.55605010732486,
      127.00496835047365,
    );
    const marker = new kakao.maps.Marker({
      position: markerPosition,
    });
    marker.setMap(map);

    map.relayout();
  }, []);

  return (
    <div>
      <div id='map' style={{ width: '500px', height: '500px' }}></div>
    </div>
  );
};

export default KakaoMap;
// KakaoMap.jsx
import KakaoMap from './KakaoMap';
import './MapModal.css';
const MapModal = () => {
  return (
    <div className='mapmodal-container relative flex justify-center'>

      <div className='mapmodal-map w-full'>
        <h1>지도</h1>
        <div className='w-full'>
          <KakaoMap />
        </div>
      </div>
    </div>
  );
};

export default MapModal;
// MapModal.jsx

다른 컴포넌트에서 작게 띄운 카카오맵을 클릭하면
MapModal이라는 모달창을 띄워 카카오맵을 크게 볼 수 있도록 하려고 했는데
다른 컴포넌트에선 카카오맵이 뜨는데 모달 창에서는 뜨지가 않아요… 그냥 하얀 창만 나와요


이 작은 지도를 클릭하면

이렇게 모달창이 뜨면서 큰 카카오맵이 뜨도록 하고 싶어요

모달, 탭처럼 동적으로 스타일이 변경되는 경우는 모달창이 열리는 시점에 map.relayout() API를 호출해주셔야 합니다.
이전 유사 게시글 답변도 함께 참고해 주세요.