How do I add a react landing page to a react app?

I have coded a landing page in react, and in a separate project a react/typescript app. How would I go about setting my website up so that when there's no user auth, the landing page and all its features show, and when logged in change the landing page to the actual app [e.g. twitter]. I realise that in my app project folder, I will need to change a few things, but I'm not sure what exactly.

React landing page app.jsx:

import React, { useEffect, useState } from 'react';import {  Routes,  Route,  useLocation} from 'react-router-dom';import 'aos/dist/aos.css';import './css/style.css';import AOS from 'aos';import Home from './pages/Home';import SignIn from './pages/SignIn';import SignUp from './pages/SignUp';import ResetPassword from './pages/ResetPassword';import LearnMore from './pages/LearnMore';import AboutUs from './pages/AboutUs';import ComingSoon from './pages/ComingSoon';import RecosiaPay from './pages/RecosiaPay';import RecosiaBank from './pages/RecosiaBank';import Guides from './pages/Guides';import PrivacyPolicy from './pages/PrivacyPolicy';import Support from './pages/Support';import Pitchdeck from './pages/PitchDeck';function App() {  const location = useLocation();  useEffect(() => {    AOS.init({      once: true,      disable: 'phone',      duration: 700,      easing: 'ease-out-cubic',    });  });  useEffect(() => {    document.querySelector('html').style.scrollBehavior = 'auto'    window.scroll({ top: 0 })    document.querySelector('html').style.scrollBehavior = ''  }, [location.pathname]); // triggered on route change  return (<><Routes><Route exact path="/" element={<Home />} /><Route path="/signin" element={<SignIn />} /><Route path="/signup" element={<SignUp />} /><Route path="/guides" element={<Guides />} /><Route path="/support" element={<Support />} /><Route path="/pitch-deck" element={<Pitchdeck />} /><Route path="/privacy-policy" element={<PrivacyPolicy />} /><Route path="/recosia-pay" element={<RecosiaPay />} /><Route path="/recosia-bank" element={<RecosiaBank />} /><Route path="/learn-more" element={<LearnMore />} /><Route path="/coming-soon" element={<ComingSoon />} /><Route path="/about-us" element={<AboutUs />} /><Route path="/reset-password" element={<ResetPassword />} /></Routes></>  );}export default App;

and React Typescript [actual application] App.jsx code:

import type { AppProps } from 'next/app'import { ChakraProvider } from '@chakra-ui/react'import { theme } from '../chakra/theme';import Layout from "../components/Layout/Layout";import { RecoilRoot } from 'recoil';function MyApp({ Component, pageProps }: AppProps) {  return (<RecoilRoot><ChakraProvider theme={theme}><Layout><Component {...pageProps} /></Layout></ChakraProvider></RecoilRoot>  );}export default MyApp;