Repository: material-ui
Issue: [Masonry][material] layout flicker/shift issue, where the columns momentarily transition into rows
Labels: ready to take,component: masonry

### Steps to reproduce 🕹

Link to live example:

Steps:

1.Create a simple Masonry component using Material UI with multiple items.
2.Observe the layout of the component as it loads/reload and adjusts to the screen size.
3.Notice that the columns momentarily transition into rows before returning to their normal state, causing a layout flicker or shift.


### Current behavior 😯

The columns momentarily transition into rows before returning to their normal state, causing a layout flicker or shift.

### Expected behavior 🤔

The Masonry component should maintain a consistent layout without any visual disruption or flickering.

### Context 🔦


I have included the columns and spacing props in my implementation of the Masonry component,And also i have changed the defaultColumns and defaultHeight but no useful.
The issue occurs consistently across multiple browsers and devices.
I have not set any conflicting CSS styles that may be affecting the layout of the grid.
This issue is impacting the visual experience of my application and may affect user engagement and satisfaction.

**below image is the simple code using masonry componet** 
![image](https://user-images.githubusercontent.com/98267513/228226477-e590ef16-d97e-4896-8b28-39894b1de29e.png)
**Current output** 
![image](https://user-images.githubusercontent.com/98267513/228228261-bdbe2c79-4a9b-463e-9a90-c80e7860ea26.png)
 _The above image was captured within microseconds, so it is not visible when refreshing the page a single time. It requires a fast refresh of the page to become visible. Please note that this issue may not be immediately noticeable to users, but it still impacts the visual experience of the application_

**Expected output**
![Expected output](https://user-images.githubusercontent.com/98267513/228227304-4d4c218b-5249-493f-a88d-447e3b2eef59.png)

Thank you for your attention to this issue. Please let me know if there is any additional information or steps I can provide to help identify and resolve the issue.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 4.15 GB / 15.60 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD      
    npm: 7.24.2 - ~\ReactCode\node_modules\.bin\npm.CMD   
  Managers:
    Composer: 2.3.5 - C:\ProgramData\ComposerSetup\bin\composer.BAT
    pip2: 19.2.3 - C:\Python27\Scripts\pip2.EXE
    pip3: 22.3.1 - C:\Program Files\Python310\Scripts\pip3.EXE
  Utilities:
    Git: 2.40.0.
  Virtualization:
    Docker: 20.10.23 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.76.2 - C:\Users\pg\AppData\Local\Programs\Microsoft VS Code\Microsoft VS Code\bin\code.CMD    
  Languages:
    Java: 18.0.2.1
    PHP: 7.4.29 - C:\xampp\php\php.EXE
    Python: 3.10.10
  Databases:
    MySQL: undefined - C:\Program Files\MySQL\MySQL Server 8.0\bin\mysql.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.54)
</details>