I have the following problem, i set the opacity of an element depending on the useState, but if i go another route, the opacity sets back to 0

const [phoneVisible, setPhoneVisible] = useState(false);

useLayoutEffect(() => {
  if (toggleEvent !== "undefined") {
    setTimeout(() => {
      animatePhone(phoneRef, toggleEvent);
      setPhoneVisible(toggleEvent);
    }, 100);
  }
}, [phoneRef, toggleEvent]);

return (
<>
      <div
        ref={phoneRef}
        style={{ opacity: phoneVisible ? 1 : 0 }}
        className="relative w-screen h-screen"
      >
      ...
      </div>

</>
);

Im out of ideas, thanks for your help