I made a boolean useState fro toggle, so i putted the toggle funciton on a Onclick={} placed on the hamburguer menu and then made a dinamic change in the className based on the boolen but although the toggle is working good when i click on the hambuerguer menu, the navLinks which show and hide are just doing nothing so i was wondering why the className is not doing what its supposed to. Here is my code, any help will be really appreciated.

 const [showNav, setShowNav] = useState(false) 

  const openMenu = () =>{
    setShowNav(!showNav)

    console.log(showNav)
  }

 <nav className='app__nav' id={showNav? 'hidden':''} >
        <img className="nav__close-btn" src={closeButton} alt="close-menu"/>
          <ul>            
            <li><Link className="nav__link" to='#'>Alumnos</Link></li>
            <li><Link className="nav__link" to='#'>Voluntarios</Link></li>
            <li><Link className="nav__link" to='#'>Nosotros</Link></li>           
          </ul>
        </nav>

And here is the css

.app__header .app__nav{
  position: fixed;
  right: 0;
  top: 0;
  background-color:white;
  height: 100vh;
  width: 50%;
  z-index: 2;
  text-transform:uppercase;
  transform: translateX(100%);  
  transition: 0.5s ease-in-out;
}

 .app__header .app__nav #hidden{
  transform: translateX(0%);  
  /* transition: 0.5s ease-in-out; */
}

Hope you can tell me whats wrong, thank you!