How to style MUI element outside of nested TreeItem?

Question

I have a custom React component (AttributeTable) and it's currently nested within a MUI TreeView. I'd like all the behaviour of the TreeView component (expanding/collapsing), but I just want the AttributeTable to use up the whitespace to the left of it. Is it possible for me to keep it functionally nested, but appear further to the left?

My current code:

import 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 TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const tableStyle = {
  p: 0.5,
};
const AttributeTable = ({ attributes }) => {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableBody>
          {attributes.map((row, index) => (
            <TableRow key={index}>
              <TableCell sx={tableStyle} component="th" scope="row">
                {row.Field}
              </TableCell>
              <TableCell sx={tableStyle}>{row.Value}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default AttributeTable;

Image of desired behaviour:

Thanks in advance!

I've tried to style the component to remove the margin but that still didn't seem to work.