when i add the event listener to my react app everything disappears idk what's the problem

i want to add a onclick event to my navbar button but when i add the eventistener everything disappears. here's my code:

import React from "react";
import {Bars3Icon} from '@heroicons/react/24/solid'


const Navbar = () => {
    let btn = document.querySelector('icon');
    let menu = document.querySelector('menu1');
    
    btn.addEventListener('click' , () => {
        menu.classList.toggle('hidden');
    })
    return (
    <div className="bg-[#1f1e20]">
        <div>
           <button id="icon"><Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" /></button>
            <ul id="menu1" className="grid text-white text-center gap-4 p-4  ">
                <a href=""><il>
                Home
                </il></a>
                <a href=""><il>
                About
            </il></a>
            <a href=""> <il>
                Contact
            </il></a>
            </ul>
        </div>
    </div>
    )
}



export default Navbar;

idk what am i missing i reviewed some source codes aswell.

You're kind of going about this all wrong. You are not using React the way it is meant to be used, relying on attaching and removing properties via query selection. Try thinking about it the "React" way.

If you want to toggle on a class, create a state variable that saves the value between re-renders.

const [hidden, setHidden] = useState(false);

Then you should change your button component to use the onClick props.

<button onClick={() => setHidden(!hidden) }>
    <Bars3Icon ... /> 
</button>

Finally, toggle your class using a ternary operator;

<Bars3Icon className={`text-white w-8 h-8 relative left-[320px] top-2 ${hidden ? 'hidden' : ''}`} />

Looks like you're probably missing the class/id in the querySelector.

Make sure you add the correct class/method for icon and menu in the querySelector.

Also, try not to manipulate DOM elements directly in react.
You could use React's state and event handling to achieve the desired behavior.

import React, { useState } from "react";
import { Bars3Icon } from '@heroicons/react/24/solid';

const Navbar = () => {
  const [menuVisible, setMenuVisible] = useState(false);

  const toggleMenu = () => {
    setMenuVisible(!menuVisible);
  };

  return (
    <div className="bg-[#1f1e20]">
      <div>
        <button id="icon" onClick={toggleMenu}>
          <Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" />
        </button>
        <ul id="menu1" className={`grid text-white text-center gap-4 p-4 ${menuVisible ? '' : 'hidden'}`}>
          <li>
            <a href="">Home</a>
          </li>
          <li>
            <a href="">About</a>
          </li>
          <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Navbar;

This should give the desired result