How to conditionally return JSX from react components

Example

import React, { useState } from "react";

export default function App() {

  const [user, setUser] = useState(false);

  return user ? <Profile /> : <Login />;
}

const Profile = () => {
  return <h1>This is profile page</h1>;
};

const Login = () => {
  return <h1>This is login page</h1>;
};