how import JavaScript in React?

Question

I Have a navbar that in Mobile is hamburger Menu, for this nav i have some js code that have some event on html element( add class on tag ) and i dont know how can i import js code into React for my menu .if is there a way to import js code , i will be so happy to learn that .

Header Component code :

import React from "react";
import logo from "../images/logo.png";

function Header(props) {
  
  return (
    <header
      id="header"
      className="fixed-top d-flex align-items-center header-transparent"
      dir="rtl"
    >
      <div className="container d-flex align-items-center justify-content-between">
        <div className="logo d-flex">
          <img src={logo} alt="عکس" className="imglogo px-2 " />
          {/* <!-- <h1><a href="index.html"><span>ایپاکو</span></a></h1> --> */}
        </div>

        <a className=" btn btn-danger text-center text-white fs-5" href="#">
          ورود | ثبت نام
        </a>
        <nav id="navbar" className="navbar d-flex justify-content-between">
          <ul>
            <li>
              <a
                className="nav-link scrollto active border-success fs-4"
                href="#hero"
              >
                خانه
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#about">
                درباره ما{" "}
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#">
                ازمون سنجش{" "}
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#">
                فرم ارز یابی
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#">
                محصولات
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#">
                فروشگاه
              </a>
            </li>
            <li>
              <a className="nav-link scrollto fs-5" href="#">
                مقالات
              </a>
            </li>
          </ul>
          <i className="bi bi-list mobile-nav-toggle"></i>
        </nav>
        {/* <!-- .navbar --> */}
      </div>
    </header>
    //  End Header
  );
}


export default Header;

App js code :

import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "./App.css";
import Header from "./component/Header";
import "./maincode"; // My JS CODE

export default class App extends Component {

    
    render() {
        return (
            <>
                <Header />
         
        
            </>
        )
    }
}

App css code :

/*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
#header {
  height: 80px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  /* background: -webkit-gradient(linear, left top, right top, from(rgba(0, 170, 80, 0.75)), to(rgba(0, 120, 73, 0.75)));*/
  background: linear-gradient(to right, rgba(0, 170, 80, 0.75), rgba(0, 120, 73, 0.75));
}

#header.header-scrolled {
  /* background: -webkit-gradient(linear, left top, right top, from(rgba(2, 113, 54, 0.75)), to(rgba(1, 59, 37, 0.75)));*/
  background: linear-gradient(to right, rgba(2, 113, 54, 0.75), rgba(1, 59, 37, 0.75)); 
  height: 60px;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
}

#header .logo h1 a, #header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}
 
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

/*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
/**
  * Desktop Navigation 
  */
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 0 10px 15px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 3px;
  left: 30px;
  background-color: #1acc8d;
  visibility: hidden;
  width: 0px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible;
  width: 25px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff;
}

/**
  * Mobile Navigation 
  */
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* background: -webkit-gradient(linear, left top, right top, from(rgba(0, 170, 80, 0.75)), to(rgba(0, 120, 73, 0.75)));*/
  background: linear-gradient(to right, rgba(0, 170, 80, 0.75), rgba(0, 120, 73, 0.75)); 
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 8px;
  background-color: #fff;
  overflow-y: auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 10em;
}

.navbar-mobile > ul > li > a:before {
  right: 20px;
}

.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #04723d;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #64ffc1;
}

.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul, .navbar-mobile .dropdown .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  /* -webkit-box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); */
          box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li, .navbar-mobile .dropdown .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a, .navbar-mobile .dropdown .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i, .navbar-mobile .dropdown .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a, .navbar-mobile .dropdown .dropdown ul a:hover, .navbar-mobile .dropdown .dropdown ul .active:hover, .navbar-mobile .dropdown .dropdown ul li:hover > a {
  color: #1acc8d;
}

.navbar-mobile .dropdown > .dropdown-active, .navbar-mobile .dropdown .dropdown > .dropdown-active {
  display: block;
}

Maincode js (My js code for NAV):

/**
     * Easy selector helper function
     */
    const select = (el, all = false) => {
      el = el.trim()
      if (all) {
        return [...document.querySelectorAll(el)]
      } else {
        return document.querySelector(el)
      }
    }
  
    /**
     * Easy event listener function
     */
    const on = (type, el, listener, all = false) => {
      let selectEl = select(el, all)
      if (selectEl) {
        if (all) {
          selectEl.forEach(e => e.addEventListener(type, listener))
        } else {
          selectEl.addEventListener(type, listener)
        }
      }
    }
  
    /**
     * Easy on scroll event listener 
     */
    const onscroll = (el, listener) => {
      el.addEventListener('scroll', listener)
    }
  
    /**
     * Navbar links active state on scroll
     */
    let navbarlinks = select('#navbar .scrollto', true)
    const navbarlinksActive = () => {
      let position = window.scrollY + 200
      navbarlinks.forEach(navbarlink => {
        if (!navbarlink.hash) return
        let section = select(navbarlink.hash)
        if (!section) return
        if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
          navbarlink.classList.add('active')
        } else {
          navbarlink.classList.remove('active')
        }
      })
    }
    window.addEventListener('load', navbarlinksActive)
    onscroll(document, navbarlinksActive)
  
    /**
     * Scrolls to an element with header offset
     */
    const scrollto = (el) => {
      let header = select('#header')
      let offset = header.offsetHeight
  
      if (!header.classList.contains('header-scrolled')) {
        offset -= 20
      }
  
      let elementPos = select(el).offsetTop
      window.scrollTo({
        top: elementPos - offset,
        behavior: 'smooth'
      })
    }
  
    /**
     * Toggle .header-scrolled class to #header when page is scrolled
     */
    let selectHeader = select('#header')
    if (selectHeader) {
      const headerScrolled = () => {
        if (window.scrollY > 100) {
          selectHeader.classList.add('header-scrolled')
        } else {
          selectHeader.classList.remove('header-scrolled')
        }
      }
      window.addEventListener('load', headerScrolled)
      onscroll(document, headerScrolled)
    }
  
    /**
     * Back to top button
     */
    let backtotop = select('.back-to-top')
    if (backtotop) {
      const toggleBacktotop = () => {
        if (window.scrollY > 100) {
          backtotop.classList.add('active')
        } else {
          backtotop.classList.remove('active')
        }
      }
      window.addEventListener('load', toggleBacktotop)
      onscroll(document, toggleBacktotop)
    }
  
    /**
     * Mobile nav toggle
     */
    on('click', '.mobile-nav-toggle', function(e) {
      select('#navbar').classList.toggle('navbar-mobile')
      this.classList.toggle('bi-list')
      this.classList.toggle('bi-x')
    })
  
    /**
     * Mobile nav dropdowns activate
     */
    on('click', '.navbar .dropdown > a', function(e) {
      if (select('#navbar').classList.contains('navbar-mobile')) {
        e.preventDefault()
        this.nextElementSibling.classList.toggle('dropdown-active')
      }
    }, true)
  
    /**
     * Scrool with ofset on links with a class name .scrollto
     */
    on('click', '.scrollto', function(e) {
      if (select(this.hash)) {
        e.preventDefault()
  
        let navbar = select('#navbar')
        if (navbar.classList.contains('navbar-mobile')) {
          navbar.classList.remove('navbar-mobile')
          let navbarToggle = select('.mobile-nav-toggle')
          navbarToggle.classList.toggle('bi-list')
          navbarToggle.classList.toggle('bi-x')
        }
        scrollto(this.hash)
      }
    }, true)
  
    /**
     * Scroll with ofset on page load with hash links in the url
     */
    window.addEventListener('load', () => {
      if (window.location.hash) {
        if (select(window.location.hash)) {
          scrollto(window.location.hash)
        }
      }
    });