Why sticky position not working in my outlet component /react js

Question

This is my Outlet, where I'm rendering components, and now I'm rendering now MainPage component inside of i rendering another components, and I want make the rightBar as sticky component and also in a product list some parts as a sticky position. so I followed sticky rules, but they are not working. I guess the problem is with outlet, which is may not relative.

const MainLayout = (props) => {
  return (
    <>
      <Box sx={{ position: "relative", height: "100vh" }}>
        <Header />
        <Box sx={{ position: "relative" }}>
          <Outlet />
        </Box>
        <Footer />
      </Box>
    </>
  );
};`

    <Box
      sx={{
        height: "80vh",
        mt: "32px",
        display: "flex",
        border: "1px solid red",
        width: "100%",
        position: "relative",
      }}
    >
      <RightBar />
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          flexGrow: "1",
          px: "16px",
          marginLeft: "300px",
        }}
      >
        <Box sx={{ display: "flex" }}>
          <FilePicker />
        </Box>
        <Box
          sx={{
            display: "flex",
            width: "100%",
            position: "sticky",
            zIndex: "1400",
            top: "80px",
          }}
        >
          <ProductList />
        </Box>
      </Box>
    </Box>
  );
};

  return (
    <Box
      sx={{
        display: "flex",
        border: "1px solid blue",
        flexDirection: "column",
        flexGrow: "1",
        position: "relative",
      }}
    >
      <Typography variant="h4">Product List {products.length}</Typography>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: "100%" }} aria-label="customized table">
          <TableHead
            sx={{
              position: "sticky",
              top: "80",
              zIndex: "9999",
              height: "50px",
            }}
          >