[Masonry] Fix flickering when used with React 18

[mnajdova]

When used in React 18, there is a visible flickering in the Masonry component. See #32518 reproduction: https://codesandbox.io/s/b83ug2 (try to open/close some of the accordions and notice the flickering).

I could find one relevant issue on React's repo react/react#24331 where the suggestion is to batch the states updates in the ResizeObserver's callback together.

Codesandbox using the packages from this PR

• Masonry with React 18 codesandbox
• Masonry with React 17 codesandbox - no regressions using React 17

Fixes #32518

---

If this is the right fix for this issue, we are likely going to go through all usages of ResizeObserver and ensure that there are no more bugs similar to this one.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 42fdc5e

[eps1lon]

Great PR description 👍🏻

You might be hitting an issue that's actively being worked on in react/react#24594.

The fix looks fine though.

I'd recommend checking if you can still reproduce this issue when using an experimental build from react/react#24594 (might need to build locally and ensure the enableFrameEndScheduling is set i.e. @experimental is built).

I'm not sure if react/react#24594 is meant to address react/react#24331 but it'd be valueable feedback nontheless.

[mnajdova]

Thanks for the quick feedback @eps1lon, sure will test out tomorrow with the build from react/react#24594 to see if I can reproduce the issue.

[mnajdova]

The bug is still there with the current build from react/react#24594 (I've set the variable enableFrameEndScheduling locally true everywhere, built the packages and used those in the cra with the repro).