MUI：Useresizecontainer-网格的父

Question

有人可以帮助我修复此控制台错误材料材料-UI数据网格错误：

  import * as React from "react";
  import { DataGrid, GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
  import { Container, Tabs, Box, Tab } from "@mui/material";

  interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
  }

  function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;

  return (
  <div
  role="tabpanel"
  hidden={value !== index}
  id={`simple-tabpanel-${index}`}
  aria-labelledby={`simple-tab-${index}`}
  {...other}
   >
  <Box sx={{ p: 3 }}>
    <div>{children}</div>
  </Box>
  </div>
  );
  }

  function a11yProps(index: number) {
  return {
   id: `simple-tab-${index}`,
  "aria-controls": `simple-tabpanel-${index}`
  }; 
  }

  export default function BasicTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
   };

   const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 90 },
  {
  field: "firstName",
  headerName: "First name",
  width: 150,
  editable: true
  },
  {
  field: "lastName",
  headerName: "Last name",
  width: 150,
  editable: true
  },
  {
  field: "age",
  headerName: "Age",
  type: "number",
  width: 110,
  editable: true
  },
  {
  field: "fullName",
  headerName: "Full name",
  description: "This column has a value getter and is not sortable.",
  sortable: false,
  width: 160,
  valueGetter: (params: GridValueGetterParams) =>
    `${params.row.firstName || ""} ${params.row.lastName || ""}`
   }
  ];

  const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
  ] ;

  return (
  <Box sx={{ width: "100%" }}>
  <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
    <Tabs
      value={value}
      onChange={handleChange}
      aria-label="basic tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </Box>
  <TabPanel value={value} index={0}>
    <Container>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </Container>
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
  </Box>
 );
 }

我正在获取此控制台错误mui：useresizecontainer。我不知道我在做什么错。任何帮助 我试图通过更改：

    {value === index && <div>{children}</div>} to <div>{children}</div>

codesandbox： https://codesandbox.io/s/trusting-edison-e4o55p?file=/src/app/app.tsx:0-3211