[data grid] Column resizing does not change row width simultaneously

[gnsamuel]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-p37kbz?file=Demo.tsx

Steps:

1. Add a custom row to the slots property inside the DataGrid
2. Wrap the row with another element (div or Box)
3. Resize the column

Current behavior

Row width changes after resizing the column

IST-Bug.mov

Expected behavior

Row width changes while resizing the column

Soll-Aufnahme.mov

Context

If a custom Row component is passed into the slots of a DataGrid and wrapped inside another element (such as a simple div), the row width will only adjust to the column width after the column is resized.

      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
        slots={{
          row: CustomRow,
        }}
      />

export const CustomRow = ({ row, ...rest }: GridRowProps) => {
  return (
    <div>
      <GridRow row={row} {...rest} />
    </div>
  );
};

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.1.1
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.2.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react:  11.11.1 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.5 
    @mui/lab:  5.0.0-alpha.134 
    @mui/material:  5.15.16 
    @mui/system:  5.15.15 
    @mui/x-charts:  7.4.0 
    @mui/x-data-grid-premium:  7.3.2
    @mui/x-date-pickers-pro:  7.3.2
    @types/react: 18.0.32 => 18.0.32 
    react:  18.2.0 
    react-dom:  18.2.0 
    typescript: 5.0.3 => 5.0.3 

Browser: Chrome

Search keywords: Row Column resizing