ReferenceError: kakao is not defined 에러 문의드립니다

지도/로컬 API
1

에러 해결하고싶어요

ReferenceError: kakao is not defined
at e (map.js:12)
at map.js:6
at il (react-dom.production.min.js:211)
at vu (react-dom.production.min.js:257)
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wi (react-dom.production.min.js:122)
at hu (react-dom.production.min.js:257)
at react-dom.production.min.js:256
at D (scheduler.production.min.js:17)
at MessagePort.E.port1.onmessage (scheduler.production.min.js:14)
el @ react-dom.production.min.js:209
scheduler.production.min.js:14 Uncaught ReferenceError: kakao is not defined
at e (map.js:12)
at map.js:6
at il (react-dom.production.min.js:211)
at vu (react-dom.production.min.js:257)
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wi (react-dom.production.min.js:122)
at hu (react-dom.production.min.js:257)
at react-dom.production.min.js:256
at D (scheduler.production.min.js:17)
at MessagePort.E.port1.onmessage (scheduler.production.min.js:14)

2

react에서 스크립트가 로드되기 전에 kakao 객체에 접근한 것 같습니다.
아래 스크립트 로드 방식을 참고해서 확인 부탁드립니다.

https://devtalk.kakao.com/t/react-api/105709/3?u=lea.ju
https://codesandbox.io/s/gifted-wescoff-77nwu?file=/src/KakaoMap.js:333-345