Javascript in react causes website to collapse when the page reloads

I wrote Javascript to create a toggle button from an image to pop out a full-screen navigation bar.

Javascript

const menuHamburger = document.querySelector(".menu-hamburger")
const navLinks = document.querySelector(".nav-links")

     menuHamburger.addEventListener('click',()=>{
     navLinks.classList.toggle('mobile-menu')
     })

This was placed in after all the imports of the react main app.js file

What this does is it removes the margin left:-100% that was set in the nav links (vertical navigation bar) to make it appear by adding a class of margin:0 in media queries.

This is the navigation bar css.

.nav-links{
  position:absolute;                              Applied  to 3 Li elements.
  background-color:rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  width:100%;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  display:flex;
  margin-left:-100%;
  transition: all 0.5s ease;
  height:100vh;

}

Though it works when I reload the page it removes all the elements in the body.

Also the blurry vertical navigation bar is supposed to blur all the elements however some text are very clear.
If this is not enough Code Sandbox.

Adding on, the code shows no errors though everything is missing.

I expect to have a blurry navigation bar that blurs all the elements.

I tried removing the Javascript from the website and it was full functional but when I put it back it disappears.