[REACT} Reload component in page with multiple components, from other component

This is my main App.jsx, where I have a test variable named navigateTo. This variable sets the 2nd section of the page to 'Home' or 'Document' (below Navbar and above Footer).

import { Navbar, Home, Footer, Documentation } from "./components";

var navigateTo = "Home";

const App = () => {
  
  return (
    <div className="min-h-screen gradient-bg-welcome">
      <div>
        <Navbar/>
        {Home.name == navigateTo
          ? <Home/>
          : Documentation.name == navigateTo
            ? <Documentation/>
            : <p/>
        }
      </div>
      <Footer/>
    </div>
  );
}

export default App;

I have an onClick in the Navbar where I select 'Home' or Documentation' and like to reload the 2nd section in App.jsx to the onClick item value. How can I do this?

const [navigateToMenuItem, setNavigateToMenuItem] = useState('Home');
const navLinks = ["Home", "Documentation"];
.......
{navLinks.map((item, index) => (
  <div key={item + index} onClick={() => (setNavigateToMenuItem(item), console.log(item))}>
    <NavbarItem key={item + index} title={item} />
  </div>
))}
.......