Почему опасноSetInner HTML не работает в React Gatsby?

Question

Я отчаянно пытаюсь запустить эти два простых javascript-сценария в React Gatsby. Даже после нескольких дней исследований я все еще не могу понять.

Одна из многих попыток, которые я пробовал, - это использовать dangerousSetInner HTML. Я понял, что не работает. Чтобы проверить это, я добавил console.log () в начало каждого скрипта. Консоль не выводила никаких журналов.

import React from "react"

export default class Home extends React.Component {
  render() {
    return (
      <div style={{ color: `purple` }}>
        <div id="map" style={{ height: '2000px',width: '2000px'}}></div>
        <script
        dangerouslySetInnerHTML={{
          __html: `
            console.log('kakaoapi');
            window.kakao=window.kakao||{},window.kakao.maps=window.kakao.maps||{},window.daum&&window.daum.maps?window.kakao.maps=window.daum.maps:(window.daum=window.daum||{},window.daum.maps=window.kakao.maps),function(){function a(){if(E.length){t(S[E.shift()],a).start()}else e()}function t(a,t){var e=document.createElement("script");return e.charset="utf-8",e.onload=t,e.onreadystatechange=function(){/loaded|complete/.test(this.readyState)&&t()},{start:function(){e.src=a||"",
            document.getElementsByTagName("head")[0].appendChild(e),e=null}}}function e(){for(;c[0];)c.shift()();o.readyState=2}var o=kakao.maps=kakao.maps||{};if(void 0===o.readyState)o.onloadcallbacks=[],o.readyState=0;else if(2===o.readyState)return;o.VERSION={ROADMAP:"1912uow",ROADMAP_SUFFIX:"",HYBRID:"1912uow",SR:"3.00",ROADVIEW:"7.00",ROADVIEW_FLASH:"200402",BICYCLE:"6.00",USE_DISTRICT:"1912uow",
            SKYVIEW_VERSION:"160114",SKYVIEW_HD_VERSION:"160107"},o.RESOURCE_PATH={ROADVIEW_AJAX:"//t1.daumcdn.net/roadviewjscore/core/css3d/200204/standard/1580795088957/roadview.js"};for(var n,r="https:"==location.protocol?"https:":"http:",s="",i=document.getElementsByTagName("script"),d=i.length;n=i[--d];)if(/\/(beta-)?dapi\.kakao\.com\/v2\/maps\/sdk\.js\b/.test(n.src)){s=n.src;break}i=null;var c=o.onloadcallbacks,E=["v3"],I="",S={v3:r+"//t1.daumcdn.net/mapjsapi/js/main/4.2.0/kakao.js",services:r+"//s1.daumcdn.net/svc/attach/U03/cssjs/mapapi/libs/1.0.1/1515130215283/services.js",drawing:r+"//t1.daumcdn.net/mapjsapi/js/libs/drawing/1.2.5/drawing.js",
            clusterer:r+"//s1.daumcdn.net/svc/attach/U03/cssjs/mapapi/libs/1.0.6/1460434272434/clusterer.js"},_=function(a){var t={};return a.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,e,o){t[e]=o}),t}(s);I=_.appkey,I&&(o.apikey=I),o.version="4.2.0";var R=_.libraries;         
            `
          }}
        />
        <script
        dangerouslySetInnerHTML={{
          __html: `
            console.log('map');
            {
              var mapContainer = document.getElementById('map'), 
                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>
    )}
}

Как мне заставить работать эти два скрипта опасноSetInner HTML? Спасибо.