我有下面的HTML我试图插入到一个React组件：

<div id="wg-api-football-livescore"
     data-host="api-football-v1.p.rapidapi.com"
     data-refresh="60"
     data-key="Your-Api-Key-Here"
     data-theme=""
     data-show-errors="false"
     class="api_football_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/football/1.1.8/widget.js">
</script>

HTML呈现了一个通过底部的脚本标记调用的小部件。我已经尝试了一些像Webpack这样的解决方案，老实说，我对此不太清楚。
关于它的一些事情。有些细节包含在div标签中，比如包含我的api键的data-key，还有其他细节，比如data-host等等。我不太确定这些是否是应该作为GET请求的一部分发送的头？
我还尝试了以下方法：

useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://widgets.api-sports.io/football/1.1.8/widget.js";
        script.async = true;
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script); // This will remove the script on unmount
        };
    }, []);

但收到错误：

未捕获的语法错误：无法在模块外部使用import语句

有没有更容易更快的方法来找到解决这个问题的办法？或者如果任何人有经验，任何帮助都将不胜感激。
提前感谢：）