Default render based on conditions

Question

I'm designing a basic login/sign up interface. Login and Signup UIs reside in their own components, and each contain a link to each other (using <Link to> in case user already has an account when signup is displayed, or wants to create an account when login is displayed).

My structure is as follows:

index.tsx

ReactDOM.render(
  <MemoryRouter>
    <Routes>
      <Route path="/" element={<App />} >
        <Route path="signup" element={<Signup />} />
        <Route path="login" element={<Login />} />
      </Route>
    </Routes >
  </MemoryRouter >,
  document.getElementById('root')
);

App.tsx

function App() {
  return (
    <div className="App">
      <UserControl />
      <Outlet />
    </div>
  );
}

UserControl.tsx

function UserControl() {
///snip unrelated code

    if (!isLoggedIn && !userHasNeverLoggedInBefore) {
        return (<Signup />)
    } else if (!isLoggedIn) {
        return (<Login />)
    } else {
        return (<Functionality />
        )
    }
}

When opening '/', I want the decide whether to display Login, Signup or Functionality. I also want links in Login and Signup to each other.

With my current approach, I see the UI twice - I'm assuming one comes from the <UserControl> in App.tsx, and the other from the <Outlet>. How can I conditionally render it just once?

I'm using React Router 6.