[data grid] Column autosizing calculated on old data instead of new data

[Frooons]

Steps to reproduce

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

Current behavior

The community version of data grid uses the old data set to set the --DataGrid-rowWidth css variable when using the autosizeColumns functionality, resulting in inconsistencies between the header and data rows.

Row exceeds header length:

Header exceeds row length:

The pro version does set the --DataGrid-rowWidth based on the new data, as shown in the screenshot below. The pro version above the community version below, both using the same data but different widths:

Expected behavior

The community version should also set the --DataGrid-rowWidth based on the new data just like the pro version does.

Context

The live example is a fork of autosizing asynchronously with extended data and the community version added below to the pro version, both use the same logic to retrieve the data and execute the autosizeColumns.

With the browser inspector open, clicking the refresh button I see the style attribute of the MuiDataGrid-root div refreshed immediately for the community version which is too soon. With the pro version the style attribute of the MuiDataGrid-root div is refreshed after the new data is loaded.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Autosizing