I need to import https://youglish.com/public/emb/widget.js to my React project and use its YG as a function. Basically, I need this widget in my React web app. I was able to use its tag. but I need to get the YG function into React app.

you may also consider https://youglish.com/api/doc/js-api

Methods I have tried so far!

1.

import 'https://youglish.com/public/emb/widget.js'

const Widget = () => {
    const widget = new YG.Widget("widget-1");
    widget.fetch("courage", "english");
  };

  return (
    <>
      <Widget />

.....

import YG from "YG";

 useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://youglish.com/public/emb/widget.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

const Widget = () => {
    const widget = new YG.Widget("widget-1");
    widget.fetch("courage", "english");
  };

  return (
    <>
      <Widget />

.....

added in index.html dody
<script
      async
      src="https://youglish.com/public/emb/widget.js"
      charset="utf-8"
    ></script>

errors: 
Failed to compile.

./src/App.tsx
Module not found: Can't resolve 'YG' in '/Users/.../Documents/Apps/Projects/.../src'