I need to render a component with class name taht is depending on my two differrent useState cases.

<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>

In my class I was trying to use ${!pause || !hover? 'hidden' : 'visible'} but this was not working

I am wondering how i can properly render this.