why my home.js is not being rendered in outlet component?

I have created the navbar.js using Material-UI but the other component doesn’t rendered in <Outlet/> Component

RootLayout.js

import { Outlet } from "react-router-dom";
import NavBar from "../component/NavBar";

function RootLayout() {
  return (
    <div>
      <NavBar />
      <Outlet />
    </div>
  );
}

export default RootLayout;

NavBar.js

import {
  AppBar,
  Typography,
  Tabs,
  Tab,
  Toolbar,
  Menu,
  MenuItem,
  Icon,
} from "@mui/material";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import { useState } from "react";
import { Link, Outlet } from "react-router-dom";

function LinkTab(props) {
  return <Tab component={Link} {...props} />;
}

function NavBar() {
  const [value, setValue] = useState(0);
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(null);
  const [subMenuAnchorElOutboard, setSubMenuAnchorElOutboard] = useState(null);
  const [subMenuAnchorElWater, setSubMenuAnchorElWater] = useState(null);
  const handleClose = () => {
    setAnchorEl(null);
    setSubMenuAnchorElOutboard(null);
    setSubMenuAnchorElWater(null);
    setOpen(false);
  };

  const handleClick = (e) => {
    setAnchorEl(e.currentTarget);
    //setOpen(true);
  };

  const handleSubMenuOutboardClick = (e) => {
    setSubMenuAnchorElOutboard(e.currentTarget);
  };

  const handleSubMenuWaterClick = (e) => {
    setSubMenuAnchorElWater(e.currentTarget);
  };

  return (
    <div>
      <AppBar>
        <Toolbar>
          <Typography align="right">X</Typography>
          <Tabs
            indicatorColor="secondary"
            textColor="primary"
            value={value}
            onChange={(e, val) => setValue(val)}
          >
            <LinkTab label="HOME" to="/"></LinkTab>
            <LinkTab label="ABOUT US" to="about"></LinkTab>
            <Tab label="PRODUCTS" onClick={handleClick}></Tab>
            <LinkTab label="NEWS" to="news"></LinkTab>
            <LinkTab label="CONTACT US" to="contact"></LinkTab>
          </Tabs>
          <Menu
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem
              onClick={handleSubMenuOutboardClick}
              sx={{ display: "flex", alignItems: "center" }}
            >
              <Typography variant="inherit" sx={{ flexGrow: 1 }}>
                OUTBOARDS
              </Typography>
              <Icon>
                <ArrowRightIcon />
              </Icon>
            </MenuItem>
            <MenuItem
              onClick={handleSubMenuWaterClick}
              sx={{ display: "flex", alignItems: "center" }}
            >
              <Typography variant="inherit" sx={{ flexGrow: 1 }}>
                WATER VEHICLE
              </Typography>
              <Icon>
                <ArrowRightIcon />
              </Icon>
            </MenuItem>
            <MenuItem onClick={handleClose}>GENUINE PARTS</MenuItem>
            <MenuItem onClick={handleClose}>YAMALUBE</MenuItem>
          </Menu>
          <Menu
            anchorEl={subMenuAnchorElOutboard}
            open={Boolean(subMenuAnchorElOutboard)}
            onClose={handleClose}
            anchorOrigin={{ vertical: "top", horizontal: "right" }}
            transformOrigin={{ vertical: "top", horizontal: "left" }}
          >
            <MenuItem onClick={handleClose}>2 STROKES</MenuItem>
            <MenuItem onClick={handleClose}>4 STROKES</MenuItem>
          </Menu>
          <Menu
            anchorEl={subMenuAnchorElWater}
            open={Boolean(subMenuAnchorElWater)}
            onClose={handleClose}
            anchorOrigin={{ vertical: "top", horizontal: "right" }}
            transformOrigin={{ vertical: "top", horizontal: "left" }}
          >
            <MenuItem onClick={handleClose}>2 STROKES</MenuItem>
            <MenuItem onClick={handleClose}>4 STROKES</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default NavBar;

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import RootLayout from "./Layout/RootLayout";
import Home from "./Pages/Home";
import About from "./Pages/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<RootLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.js

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <p>
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        The online meal recipe portal is a culinary haven that opens the doors
        valThe online meal recipe portal is a culinary haven that opens the
        doors
      </p>
    </div>
  );
}

export default Home;

It seems home.js is not being rendered in Outlet.

This is the result:

I tried to change the navbar component with other component (About.js) and it’s working fine (home.js) is rendered in outlet.
It seems there’s something wrong with NavBar.js which I couldn’t figure it out.

>Solution :

 function NavBar() {
  // ... your existing code ...

  return (
    <div>
      <AppBar>
        {/* ... your existing AppBar code ... */}
      </AppBar>
      <Toolbar /> {/* Add this line */}
    </div>
  );
}

Try this out .