Necesito renderizar un componente con un nombre de clase que depende de mis useState casos de estado de uso diferentes.

 <div className="Player" onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}> <div className={`playerNavigation__container ${!pause ? 'hidden' : 'visible'}`}> <Buttons to={'/'} className={'back'}> <img className="btn__back-img" src={back} alt="btn__back" /> </Buttons> </div> </div>

En mi clase estaba tratando de usar ${!pause || !hover? 'hidden' : 'visible'} pero esto no estaba funcionando

Me pregunto cómo puedo hacer esto correctamente.