I want to create something such that, depending on the state, a given div appears overlapping another div from the right side, here is my code:

  const [loggedIn, setLoggedIn] = useState<boolean>(false);
  const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);

  return (
    <>
      <div style={{ width: "100%" }}>
        <div style={{ float: "left", width: "50%" }}>
          <div
            style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
          ></div>
        </div>

        <div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
          {!loggedIn && (
            <div>
                WHEN LOGGED IN === TRUE
            </div>
          )}

          <div
            style={
              loggedIn && !hasConfirmedAccount 
                ? { width: "100%", transition: "ease-in-out 5s" }
                : { display: "none" }
            }
          >
            <div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
          </div>
        </div>
      </div>
    </>
  );

The code works fine, when loggedIn === true and hasConfirmedAccount === false div with id = notConfirmedAccount has been displayed instead of div with id=notLoggedIn, but displaying this div does not work flowing, I want a slow leaving effect of the div on the right side that would overlap the previous div

can someone tell me what to do this?

thanks for any help!