Tabs are not displaying on Page

I'm not sure why the tabs component is not displaying on the page, There are no errors in the console. Nothing indicating why it is not displaying. here is the code

 <Container>
    <Grid container rowGap={2} >
    <NavTab></NavTab>
      <Grid item xs={12}>

        <SelectFilter formData={formData}></SelectFilter>
      </Grid>
      <Grid item xs={12}>
      <Grid>
           
            </Grid> 
      </Grid>
      <Grid item xs={12}>
        <DataGrid
        
          autoHeight
          rows={skuBrands}
          loading={isLoading}
          columns={columns}
          getRowId={(row) => row.ID}
          onCellEditStop={(_, e) => console.log(e.target)}
          componentsProps={{ toolbar: { csvOptions: { allColumns: false } }, printOptions: { disableToolbarButton: true }, 
          open:()=>{
            console.log("opened")
          } } }
          components={{
            Toolbar: CustomToolBar
          }}
        />
      </Grid>

      {/* <PopUp setOpen={setOpen} open={open}></PopUp> */}
    </Grid>
    </Container>

Here is the navtab component, I am trying to route it to different pages. Which I think would work if I could get it to display lol. I have no idea where I went wrong.

Navbar.jsx

import * as React from 'react';
import Tabs, { tabsClasses } from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { AppBar } from '@mui/material';
import { Route, BrowserRouter, Switch, Link, Routes, Router} from "react-router-dom";

import SKUBrands from '../../SKUBrands';
import SKUpackaging from '../../SKUPackaging';
import SKU from '../../SKU';
import UoMConversions from '../../UoMConversions';
import SkuTags from '../../SkuTags';
import Bundles from '../../Bundles';
import PackSize from '../../PackSizes';

function NavTab() {

    const routes = ["/inventory/SKUBrands", 
    "/inventory/SKUPackaging", 
    "/inventory/SKUs",
    "/inventory/UoMConversions", 
    "/inventory/Bundles", 
    "/inventory/Packsize" ];

  return (
    <div className="App">
      <Routes>
        <Route
          path="/"
          render={(history) => (
            <AppBar>
              <Tabs
                value={
                  history.location.pathname !== "/"
                    ? history.location.pathname
                    : false
                }
              >
                {console.log(history.location.pathname)}
                <Tab
                  value={routes[0]}
                  label="SKU Brands"
                  component={Link}
                  to={routes[0]}
                />
                <Tab
                  value={routes[1]}
                  label="SKU Packaging"
                  component={Link}
                  to={routes[1]}
                />
              </Tabs>
            </AppBar>
          )}
        />

          <Route path="/inventory/SKUBrands" element={<SKUBrands />}  />
          <Route path="/inventory/SKUPackaging" element={<SKUpackaging />} />
     
        </Routes>
    </div>
  )
}

export default NavTab