Div content is mapping different components - reactjs

Question

I want to ask how could I implement in reactjs the next thing.
Imagine a page with 2 buttons and a div. When I press one button the content of the div would be a list of components mapped. When I press the other button the div content would be another list of components ( different component type as well ).
So more or less, the effect that results from this is a menu inside a page that loads different things in a div.
I am also willing to hear other options of implementing this, but mostly i'm here to ask you for a short example of how could I implement this thing.

Answer 1

import { useState } from "react";
import "./styles.css";
const Component1 = () =>{
return(
<div>
<h1>Component 1</h1>
</div>
)
}
const Component2 = () =>{
return(
<div>
<h1>Component 2</h1>
</div>
)
}
export default function App() {
const [component, setComponent] = useState("COMPONENT_1");
const renderComponent = () =>{
switch(component){
case "COMPONENT_1":
return <Component1/>
case "COMPONENT_2":
return <Component2/>
default:
return <div/>
}
}
return (
<div className="App">
<div>
{renderComponent()}
</div>
<button onClick={()=>setComponent("COMPONENT_1")}>Render component 1</button>
<button onClick={()=>setComponent("COMPONENT_2")}>Render component 2</button>
</div>
);
}
you can replace Component1 and Component2 with whatever you want.
Or
You can use a library like React Router https://reactrouter.com/
let me know if there is anything else you want me to add.