Cannot update a component while rendering a different component warning for Modal component for React v16.13.0

I am receiving this warning for the react modal, and upon closer inspection, I realised that it is also present on the official CodeSandBox demo, just view the console when you click the button.

Warning: Cannot update a component (ForwardRef(Modal)) while rendering a different component (ForwardRef(Fade)). To locate the bad setState() call inside ForwardRef(Fade), follow the stack trace as described in https://fb.me/setstate-in-render in ForwardRef(Fade) (at demo.tsx:83) in Unstable_TrapFocus (created by ForwardRef(Modal)) in div (created by ForwardRef(Modal)) in ForwardRef(Portal) (created by ForwardRef(Modal)) in ForwardRef(Modal) (at demo.tsx:71) in div (at demo.tsx:67) in SpringModal (at index.tsx:6)

Some research I have done on the topic include reading up on the long tag on the React Github page, as well as mention of this new warning on React’s website.

Any idea how to remove this warning?

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

[qiweiii]

@oliviertassinari the two react-spring codesandbox examples mentioned above are still not working, now it show ModuleNotFoundError Could not find module in path: 'react-spring/web.cjs', a fix is to import react-spring instead of react-spring/web.cjs.

[eps1lon]

I think we have to go with a transition model rather than a spring model: https://codesandbox.io/s/material-demo-forked-xu097?file=/demo.tsx

On a related note: The Backdrop produces a bit of any annoying UX where you close the modal and during the transition you’re not able to click the screen. We can fix this by disabling pointer-events when the Backdrop isn’t open. I’ll experiment with it and see if I can put together a PR that illustrates the issue properly and proposes a fix.