trpc query and loaded content for authenticated user

Question

I want that when user is logged in, on frontend see only logout, without pre-string login.

I want that when user is logged, see on frontend only Logout, without pre-string Login. This is my code:

const userProfile = api.user.getUserDetails.useQuery();

{status !== "authenticated" && <div>Login</div>}
{status === "authenticated" && <p>Logout</p>}

How I can fix it? When I using useState, I don't have this problem. Maybe any preloader etc?