how to hide the scrolled content behind the transparent sticky table head?

i am using React-Virtuoso library with material-ui table. i am stuck in a issue from yesterday,my table head is sticky and have transparent background same for table rows also. i dont want any another color.
when i scroll the table rows i can see them behind the table head. z-index cant fix the issue because of background color. please guys help me to fix this issue.
what i want is when i scroll the table rows shouldnt visible behind table head.
senior developers help needed.
codesandbox link : https://codesandbox.io/p/sandbox/epic-shtern-3jhn7q?workspaceId=b878446b-0701-41fb-b944-d231bbae84f1
here’s complete code:

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { TableVirtuoso } from "react-virtuoso";

const sample = [
  ["Frozen yoghurt", 159, 6.0, 24, 4.0],
  ["Ice cream sandwich", 237, 9.0, 37, 4.3],
  ["Eclair", 262, 16.0, 24, 6.0],
  ["Cupcake", 305, 3.7, 67, 4.3],
  ["Gingerbread", 356, 16.0, 49, 3.9],
];

function createData(id, dessert, calories, fat, carbs, protein) {
  return { id, dessert, calories, fat, carbs, protein };
}

const columns = [
  {
    width: 200,
    label: "Dessert",
    dataKey: "dessert",
  },
  {
    width: 120,
    label: "Caloriesu00A0(g)",
    dataKey: "calories",
    numeric: true,
  },
  {
    width: 120,
    label: "Fatu00A0(g)",
    dataKey: "fat",
    numeric: true,
  },
  {
    width: 120,
    label: "Carbsu00A0(g)",
    dataKey: "carbs",
    numeric: true,
  },
  {
    width: 120,
    label: "Proteinu00A0(g)",
    dataKey: "protein",
    numeric: true,
  },
];

const rows = Array.from({ length: 200 }, (_, index) => {
  const randomSelection = sample[Math.floor(Math.random() * sample.length)];
  return createData(index, ...randomSelection);
});

const VirtuosoTableComponents = {
  Scroller: React.forwardRef((props, ref) => (
    <TableContainer {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table
      {...props}
      sx={{
        borderCollapse: "separate",
        borderSpacing: "0px 8px",
      }}
    />
  ),
  TableHead: React.forwardRef((props, ref) => (
    <TableHead
      {...props}
      ref={ref}
      style={{
        background: "rgba(255, 255, 255, 0.1)",
        position: "sticky",
        zIndex: 2,
        top: "8px",
      }}
    />
  )),
  TableRow: React.forwardRef((props, ref) => (
    <TableRow
      {...props}
      ref={ref}
      sx={{
        background: "rgba(255, 255, 255, 0.1)",
      }}
    />
  )),
  TableBody: React.forwardRef((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
};

function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map((column) => (
        <TableCell
          key={column.dataKey}
          variant="head"
          align={column.numeric || false ? "right" : "left"}
          sx={{
            borderTop: "1px solid rgba( 255, 255, 255, 0.18 )",
            borderBottom: "1px solid rgba( 255, 255, 255, 0.18 )",
            "&:first-of-type": {
              borderLeft: "1px solid rgba( 255, 255, 255, 0.18 )",
              borderTopLeftRadius: "10px",
              borderBottomLeftRadius: "10px",
            },
            "&:last-of-type": {
              borderRight: "1px solid rgba( 255, 255, 255, 0.18 )",
              borderTopRightRadius: "10px",
              borderBottomRightRadius: "10px",
            },
          }}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  );
}

function rowContent(_index, row) {
  return (
    <React.Fragment>
      {columns.map((column) => (
        <TableCell
          key={column.dataKey}
          align={column.numeric || false ? "right" : "left"}
          style={{
            borderTop: "1px solid rgba( 255, 255, 255, 0.18 )",
            borderBottom: "1px solid rgba( 255, 255, 255, 0.18 )",
            "&:first-of-type": {
              borderLeft: "1px solid rgba( 255, 255, 255, 0.18 )",
              borderTopLeftRadius: "10px",
              borderBottomLeftRadius: "10px",
            },
            "&:last-of-type": {
              borderRight: "1px solid rgba( 255, 255, 255, 0.18 )",
              borderTopRightRadius: "10px",
              borderBottomRightRadius: "10px",
            },
          }}
        >
          {row[column.dataKey]}
        </TableCell>
      ))}
    </React.Fragment>
  );
}

export default function ReactVirtualizedTable() {
  return (
    <div
      style={{
        height: 400,
        width: "100%",
        background: "rgba(255, 255, 255, 0.1)",
      }}
    >
      <TableVirtuoso
        data={rows}
        components={VirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />
    </div>
  );
}

i dont want to see table row scrolled behind the table head.