width of the MUI DataGrid becoming larger than the parent space and stretching its size

Question

I'm making an app with a sidebar that can be increased or decreased, and I'm having a problem. By decreasing the sidebar, the DataGrid obviously increases its size. But when I increase it, instead of decreasing its size, the DataGrid remains large.

Video demonstrating the error (Imgur)

The sidebar follows the logic of the Mini Variant Drawer

in short, this is the total code of the page, from the root layout

  <Box
    sx={{
      display: "flex",
      width: "100%",
      height: "100%",
      bgcolor: "background.paper",
      paddingTop: 10,
    }}
  >
    {/* <Navigation /> */}
    {/* Navigation component */}
    <Topbar toggleDrawer={() => setOpen((o) => !o)} />
    <Sidebar open={open} close={() => setOpen(false)} />
    {/* Navigation component */}
    <Box
      component="main"
      sx={{
        width: "100%",
        height: "100%",
        bgcolor: "background.default",
        paddingBottom: 5,
        borderRadius: "8px 0 0 0",
        "@media(max-width:600px)": {
          borderRadius: 0,
        },
      }}
    >
      {/* the page */}
      <Box paddingX={2.5} width="100%">
        <Paper sx={{ padding: 4, paddingBottom: 0 }} elevation={0}>
          <Box width="100%" paddingY={4} height="625px">
            {/* <FinanceiroDataGrid data={data || []} mutate={() => mutate()} /> */}
            {/* DataGrid component */}
              <Box sx={{ height: "100%", width: "100%" }}>
                <DataGrid
                  columns={columns}
                  rows={rows}
                  slots={{ noRowsOverlay: NoRows }}
                />
              </Box>
            {/* DataGrid component */}
          </Box>
        </Paper>
      </Box>
      {/* the page */}
    </Box>
  </Box>

and this is the column code (if that makes any difference)

const columns: GridColDef[] = useMemo(
() => [
  {
    field: "efetuado",
    headerName: "Efetado",
    editable: false,
    width: 120,
    type: "boolean",
    renderCell: (cell) => (
      <ChipEfetuado efetuado={cell.value} entrada={cell.row.valor >= 0} />
    ),
  },
  {
    field: "data",
    headerName: "Data",
    editable: false,
    width: 100,
    type: "date",
    renderCell: (cell) => (
      <Chip
        label={`${cell.value.getDate()} de ${meses[
          cell.value.getMonth()
        ].substring(0, 3)}`}
        size="small"
      />
    ),
  },
  {
    field: "valor",
    headerName: "Valor",
    editable: false,
    width: 120,
    type: "number",
    renderCell: (cell) =>
      `${cell.value < 0 ? "- " : ""}${formatarDinheiro(cell.value)}`,
  },
  {
    field: "nome",
    headerName: "Nome",
    sortable: false,
    editable: false,
    hideable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "remetente",
    headerName: "Agente",
    editable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },

  {
    field: "forma",
    headerName: "Forma",
    editable: false,
    width: 100,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "descricao",
    headerName: "Descrição",
    sortable: false,
    editable: false,
    width: 335,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "Ações",
    type: "actions",
    width: 100,
    sortable: false,
    hideable: false,
    getActions: (params) => [
      <EditButton key={params.id} id={params.id} />,
      <DeleteButton key={params.id} onClick={() => setDialog(params.id)} />,
    ],
  },
],
[]

);