I am using React. I want to work with hooks and because I am using a custom theme I need to use many CDNs. I want to use custom script tags for my functional components. I wrote a method with useEffect but it doesn't work properly. How do I access the js files in my Assets folder on each page?

e.g. SignUpPage:

import React, { useState } from "react";
import axios from "axios";
import useScript from "../../hooks/useScript";

import "../../assets/css/style.bundle.css";
import "../../assets/css/pages/wizard/wizard-5.css";
import "../../assets/plugins/custom/prismjs/prismjs.bundle.css";
import "../../assets/plugins/global/plugins.bundle.css";

function SignUpPage() {
  useScript("/src/assets/plugins/global/js/plugins.bundle");
...
}

useScript.js

import { useEffect } from "react";

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script.async = t;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

I also tried using the React-Helmet and React-Script-Tag packages. But I could not. I also put the script js files in the public folder and called index.html. This time they worked. But since I have too many script js files, it seems like it is not possible for me to do a general operation.