Converting HTML Website to React – Issue loading my external JS file

I am attempting to convert my test website from HTML to React, so that I can communicate with my AWS API Gateway, Lamda function and DynamoDB.

I have 90% working now and I am able to create users, and login via my new React Website, however I am having an issue with loading a script file which I use to control my navbar during mobile viewer. This previouse worked in my HTML site.

DIR Structure

src
   hooks
         userExternalScripts.js

   Routes
         PublicRoutes.js
         PrivateRoutes.js
   Service
         AuthService.js
         internalApp.js

   App.js
   App.css
   Contact.js
   Gallery.js
   Student.js
   Register.js
   Login.js
   index.js

Any help would be much appreciated, and please let me know if you need more details.

What I have done so far.

1. Added a hooks directory, and inside created a useExternalScript.js, which adds a script tag conaining my script I use to control Navbar as a ‘src’ attribute to the Document.body.

   ———- useExternalScript.js —————-

   import { useEffect } from ‘react’;

   export default function useExternalScripts(){
   useEffect(() => {
   const script = document.createElement(“script”);

        script.src = "../service/internalApp.js";
        script.async(true);
   
        document.body.appendChild(script);
   
        return () => {
        document.body.removeChild(script);
    };
   

   }, []);
   };

   ———————————————–

2. Added my external script to control Navbar to a service dirctory

   ——————internalApp.js—————-

   const menu = document.querySelector(‘#mobile-menu’)
   const menuLinks = document.querySelector(‘.navbar__menu’)

   menu.addEventListener(‘click’, function(){
   menu.classList.toggle(‘is-active’)
   menuLinks.classList.toggle(‘active’)
   })

   ———————————————–

3. I have then been attemting to add the below snippet of code, in order to invoke this script, however I can seem to get it to work.

   Ive tried adding it to :
   Home.js, which is my homepage
   App.js, which I use to control my routes

   ————Snippet of code.—————

   import useExternalScripts from “./hooks/useExternalScripts”;
   function App() {

   const Component = () => {
   useExternalScripts();
   }

   ———————————————–

4. It would seem that I need to invoke this component some how, but I am not sure on what I should do next.

   ————–Warning——————

   Line 29:9: ‘Component’ is assigned a value but never used no-unused-vars

   ———————————————–