[DataGrid] tabs switching breaks DataGrid columns.

[ShadiBlitz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I have 3 datagrid, each one is in it's own tab. Sometimes when i switch to a different tab, only 3 columns show up. When i open the 'Show Columns' menu, all the columns appear to be switched on but only 3 can be seen on the data grid.

Expected behavior 🤔

show all columns normally.

Steps to reproduce 🕹

https://codesandbox.io/s/basictabs-demo-material-ui-forked-w0vq5n?file=/demo.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

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

Order ID 💳 (optional)

No response

[m4theushw]

We need to investigate a bit more this bug. It only happens with React 18. I noticed that the root div has zero width when the tab is changed, so the only columns rendered are those from the buffer.

[ShadiBlitz]

It only happens with React 18.

I have react 17 and still having the same issue.

[m4theushw]

I tested with React 17 and ReactDOM.render and I can't see the bug: https://codesandbox.io/s/basictabs-demo-material-ui-forked-0ukzdz?file=/demo.tsx

Could you provide a new production using React 17? It will be easier to debug and fix the bug in this version.

[ShadiBlitz]

Thank you for reply. the bug happens in react 17 but not always, maybe 1 out of every 30 tries or something like that. and sometimes random.