[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

https://github.com/mui/mui-x/assets/170027911/bd03f7e7-4f0e-4146-9461-6e9fcdfb790f

Expected behavior

Row width changes while resizing the column

https://github.com/mui/mui-x/assets/170027911/ec0bfa63-2876-4fe6-a580-d66c998ae26c

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