React hooks中如何引入原生JS库

//以插入百度地图为例
import React, {useEffect, useState} from "react";
export default function createElementScript() {
  const initScript = (url, callback) => {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    document.head.appendChild(script);
    if (script.readyState) {
      //IE下
      script.onreadystatechange = function () {
        if (script.readyState == 'complete' || script.readyState == 'loaded') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function () {
        callback();
      };
    }
  };
  useEffect(() => {
       initScript(
      'https://api.map.baidu.com/api?v=3.0&ak=asdasdadsasda',
      function () {
        console.log('已经加载完成');
      },
    );
  }, [])

  return <div >
  </div>
}

import React, { useState, useEffect } from 'react';
export default function createElementScript() {
  const loadBMap = () => {
    return new Promise(function (resolve, reject) {
      if (typeof BMap !== 'undefined') {
        resolve(BMap);
        return true;
      }
      window.onBMapCallback = function () {
        resolve(BMap);
      };
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src =
        'https://api.map.baidu.com/api?v=3.0&ak=aaasada=onBMapCallback';
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  useEffect(() => {
    loadBMap().then((res) => {
      console.log(res);
    });
  }, []);

  return <div >
  </div>
}