reactjs – Switch between views in react.js

I have this toggle button group in my Header.js component:

Here is the code:

<ToggleButtonGroup size="large">
            <ToggleButton>
              <TableRowsIcon />
            </ToggleButton>
            <ToggleButton>
              <GridViewIcon />
            </ToggleButton>
          </ToggleButtonGroup>

In the main App.js, I have two components: ProjectList (which is a table) and CardLayout (which is a grid) like this:

import { Box } from "@mui/system";
import Header from "./components/Header";
import ProjectList from "./components/ProjectList";
import CardLayout from "./components/CardLayout";    

function App() {
  return (
    <Box>
      <Header />
      <ProjectList />
      <CardLayout />
    </Box>
  );
}

export default App;

My goal is to render only the ProjectList when the left button is clicked and to render only CardLayout when the right button is clicked.

Essentially, I want to switch views depending on which button is clicked.

Do I need to use a hook for this? I’m new to react.js so I would appreciate any help. Thanks!