I am trying to render a script tag from a react component, I have tried to manually create script tag element but it does not load the .js I am trying to display a widget. For now I have included it into the main index.html file. Is that the only method or am I missing something.

PS:-I cant test the api anymore as I have consumed all my daily requests

I have looked into the script js tag it targets elements by getElementbyid function but nothing renders on my page

import { React, useEffect, useState } from "react";

const Upcoming_matches = () => {
  return (
    <>
      <div
        id="wg-api-football-fixtures"
        data-host="v3.football.api-sports.io"
        data-refresh="60"
        data-date="2022-02-11"
        data-key="xxx-xxx-xxx"
        data-theme="dark"
        data-show-errors="true"
        className="api_football_loader"
      ></div>
    </>
  );
};

export default Upcoming_matches;
 

the script tag

<script
      type="module"
      src="https://widgets.api-sports.io/football/1.1.8/widget.js">
  </script>