How to run vanilla HTML and Vanilla Javascript in React?

I have the task to “copy+paste” a page that used to be run in vanilla html and javascript into this React Application… I want to avoid refactoring as much as possible because this singular html and the vanilla.js that comes with it are really specific and big and it works with another .php file but that doesn’t come into account (for now?)

Anyway, I thought it was going to be easy at first, just copy paste the html and use the script, but apparently its not that simple, so after a lot of trials and errors I got to this solution:

Files layout:

/public
- vanilla.js

.../components/career-page/
- index.js

//index.js
const loadScript = (src, type = 'text/javascript', defer = true) => {
    return new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) {
            resolve();
            return;
        }

        const script = document.createElement('script');
        script.src = src;
        script.type = type;
        script.defer = defer;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error: ${src}`));
        document.body.appendChild(script);
    });
};

const CareerPage = () => {
    const [scriptsLoaded, setScriptsLoaded] = useState(false);

    useEffect(() => {
        Promise.all([
            loadScript('https://code.jquery.com/jquery-3.6.0.min.js','text/javascript'),
            loadScript('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'),
            loadScript('./vanilla.js')
        ]).then(() => {
            setScriptsLoaded(true);
        }).catch(error => {
            console.error('Error loading scripts:', error);
        });
    }, []);

    useEffect(() => {
        if (scriptsLoaded) {
            const container = document.getElementById('dynamic-content');
            if (container) {
        container.innerHTML = `
            <section class="section section-lg bg-default" id="jobs">
               <div class="container">
                ...
            </section>
           `;
         }
       }
     }, [scriptsLoaded]);

     return (
    <>
        <img src={bannerCareer} className="w-100" alt="careers"/>
        <div id="dynamic-content" />
    </>
  );
};

export default CareerPage;

//vanilla.js
const filedev = document.querySelector("#selectFile");
const curriculumDev = document.querySelector(".file__picture");
const choiceArchive = "Pick your file";
const arquivoText = "Select your file...";
curriculumDev.innerHTML = arquivoText;
const message = document.getElementById("fileExceeded");

filedev.addEventListener("change", function (e) {
  e.preventDefault();
  const inputTarget = e.target;
  const file = inputTarget.files[0];
  if (file) {
    const reader = new FileReader();
    if (file.size > 26214400) {
      message.innerHTML = "File Size Exceeded";
      return false;
    } else {
      reader.addEventListener("load", function (e) {
        const readeTarget = e.target;
        if (readeTarget) {
          curriculumDev.innerHTML = file.name;
        } else {
          alert("Please, select a file");
        }
      });
    }
    reader.readAsDataURL(file);
  } else {
    curriculumDev.innerHTML = choiceArchive;
  }
});

The above script is one of the many that repeat throughout the .js file and even though I get no errors when entering accessing this specific page, the script does not seem to work, it does load and I can see it on Network, I get a “Status Code: 304 Not Modified” , but the reason I think it doesn’t work is this this button for example:

<button type="button" class="btn-shared shadow-sm">
 Share our stuff!
  <a href="" id="whatsapp-share-android"
   rel="noopener external nofollow" target="_blank"
   class="link-whatsapp"></a>
 </button>

The following code is inside our vanilla.js:

document.addEventListener(
  "DOMContentLoaded",
  function () {
    var content = encodeURIComponent(
      document.title + " " + window.location.href
    );
    document.getElementById("whatsapp-share-btt").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-sap").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-android").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-ios").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-frontend").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-testes").href =
      "https://api.whatsapp.com/send?text=" + content; //
    document.getElementById("whatsapp-share-c").href =
      "https://api.whatsapp.com/send?text=" + content;
    document.getElementById("whatsapp-share-cloud").href =
      "https://api.whatsapp.com/send?text=" + content;
  },
  false
);

Even if I click the button “Share our stuff” i get redirected to the page I currently am, not the phone app page, which is another strong indication that the script is not working…

Any help on how I can make the script work given this awful case?

I already tried using DangerouslySetHTML too but I got some other errors
Also here is a pictuer showing that the script does load in network and that it does say that the scripts loaded which is here

 if (scriptsLoaded) {
            const container = document.getElementById('dynamic-content');
            console.log('Scripts loaded, setting innerHTML');

            if (container) {

        container.innerHTML = `