처음 지도가 있는 페이지에서 새로고침을 한 번 해주어야 지도가 나타나는 현상이 발생하고 있습니다

지도/로컬 API
1

안녕하세요. react로 카카오맵을 사용하여 개발을 진행중에 있습니다.
카카오맵을 연동하고 로컬서버에서 프로젝트를 실행하였는데, 지도가 있는 페이지를 접속하면
바로 지도가 로드되지 않고, 해당 페이지의 다른 html 영역만 나타나고, 새로고침을 한 번 해주어야
지도가 로드되는 현상이 나타나고 있습니다.
아래는 콘솔화면에 나타나는 문구입니다.
The resource https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&autoload=false was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

  {/* 지도 표시 영역 */}
  <>
    <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
    <Map center={{ lat: lat, lng: lng }} style={{ width: "1100px", height: "100%" }} level={4}>
      {list.map((item, index) => (
        <MapMarker key={index} position={{ lat: item.latde, lng: item.lgtde }} title={item.cntr_nm} onClick={() => {
          setLat(item.latde);
          setLng(item.lgtle);
          setModal(item);
        }} />
      ))}
    </Map>
  </>

: 어떻게 하면 지도가 있는 페이지에 들어가면 새로고침 할 필요없이 바로 지도가 나타나게 할 수 있을지 여쭤보고 싶습니다.

2

스크립트를 동적(autoload=false)으로 로드하면 kakao.maps.load(callback) 콜백 함수 안에서 지도를 생성해주셔야 합니다.
스크립트가 로드되기 전에 지도를 생성하면 kakao객체에 참조할 수 없어서 지도 생성이 되지 않습니다.

그리고 지도, 마커 생성하는 형태로 보면 react kakao map sdk를 사용하시는 것으로 보입니다.
해당 라이브러리는 저희가 제공하는 부분이 아니라 자세한 답변드리기 어렵습니다.

지도 JS SDK를 react에서 사용하는 예제는 아래 링크 참고해 주시고
예제와 비슷한 구성을 해도 동일한 현상이 보이는지 확인 부탁드립니다.
https://codesandbox.io/p/sandbox/dazzling-colden-cqyyr3?file=%2Fsrc%2FKakaoMap.js