javascript : 전환으로 하나의 div를 다른 div에 넣는 방법은 무엇입니까?

상태에 따라 주어진 div가 오른쪽에서 다른 div와 겹치는 것처럼 보이도록 만들고 싶습니다. 제 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 &amp;
&amp;
 (
            <div>                WHEN LOGGED IN=== TRUE
            </div>          )}
          <div
            style={
              loggedIn &amp;
&amp;
 !hasConfirmedAccount
                ? { width: "100%", transition: "ease-in-out 5s" }
                : { display: "none" }
            }
          >            <div id="notConfirmedAccount">WHENE LOGGED IN=== TRUE AND hasConfirmedAccount=== FALSE</div>          </div>        </div>      </div>    </>  );

code는 잘 작동합니다.로그인=== 참그리고hasConfirmedAccount=== 거짓div아이디= 확인되지 않은 계정와 함께 div 대신 표시되었습니다.아이디=로그인하지 않음, 그러나 이 div를 표시하는 것은 흐르지 않습니다. 나는 이전 div와 겹치는 오른쪽에 있는 div의 느린 떠나는 효과를 원합니다.

이 작업을 수행하는 방법을 알려주실 수 있습니까?

도움을 주셔서 감사합니다!