if else statement using state variable not working properly in ReactJS Hooks

Hi guys, i am facing an issue the condition that i am using in the return statement is both getting executed i.e first for few seconds < SigninOptions /> component and then the correct one as per the logic < Useraccount userinfo={userinfonew} /> component not sure if there is a delay somewhere or code is runnig twice

i have upload the small clip for the issue that i am facing for better understanding. i have tried to make the code very simple but still cant understand the reason why loginscreen is showing before showing the user account information

any advice on this guys, thanks in advance :slight_smile:
small youtube clip showing the issue

import Useraccount from "./Useraccount";


function Signin({ userinfo1, userinfo2 }) {

  return (
    <div>
      {userinfo2 ? (
        <Useraccount userinfo1={userinfo1} userinfo2={userinfo2} />
      ) : (
        <SigninOptions />
      )}
    </div>
  );
export default Signin;