Transferring JS function to TSX const for authorisation feature

Question

it is my first time doing authorisation and using typescript. I am watching a tutorial (https://youtu.be/pAzqscDx580?t=862) that suggests I implement the following,

The App.js from video:

function App() {
  const { isLoading, error } = useAuth0();
  return (
    <main className="column">
      <h1>Auth0 Login</h1>
      {error && <p>Authentication Error</p>}
      {!error && isLoading && <p>Loading...</p>}
      {!error && !isLoading && (
        <>
          <LoginButton />
          <LogoutButton />
          <Profile />
        </>
      )}
    </main>
  );
}

export default App;

but my file uses tsx and has some routes already. I am unsure how to integrate what's needed from the video tutorial into my already existing work. Any suggestions would be great thank you.

My App.tsx file:

const App = () => (
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="calendar" element={<Calendar />} />
      <Route path="support" element={<Support />} />
    </Route>
  </Routes>
);

export default App;