Api 맵이 사이트에 안보입니다

지도/로컬 API
,
1

API를 발급받고, 코드를 index.html에 복사 붙이기 하니까 잘됩니다.
근데 왜 React에서 똑같은 코드를 돌리면 맵이 안보이나요?
도와주세요!

/*global kakao*/

import React from "react"
import App from '../components/App.js';

export default class Home extends React.Component {
  render() {
  return (
    <div style={{ color: `purple` }}>
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=제키"></script>
      <script
        dangerouslySetInnerHTML={{
          __html: `
            var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
            mapOption = {
              center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
              level: 4, // 지도의 확대 레벨
              mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
            }; 

            // 지도를 생성한다 
            var map = new kakao.maps.Map(mapContainer, mapOption); 
            `
          }}
/>
    </div>
  )}
}