Should I use OverlayProvider only once?

[Tatametheus]

The docs in useDialog says Application must be wrapped in an OverlayProvider so that it can be
hidden from screen readers when a modal opens.
From the source code of Provider and Dialog in spectrum. I found that using ModalProvider, OverlayProvider wraps the ModalProvider as the same as Provider in spectrum does , for each Dialog. Should I follow the way in spectrum or I just need to import it once?
I alse see that OverlayContainer already wraps the OverlayProvider .

[angusd3v]

I'm also curious about this -- I have some flows that require a nested modal to open and I'm trying to figure out what the structure of OverlayProviders and OverlayContainers is supposed to be

[ktabors]

At the root of your application, you should have an OverlayProvider that wraps all your application's components. Any modals, dialogs, popovers, etc. components will be a child of this and open correctly via the OverlayContainer.

I created the following example where it has one OverlayProvider in App.js. This CodeSandbox is based on the examples in useDialog and useOverlayTrigger. I turned those examples into components, the useDialog example became ModalDialog and UsernameDialog components and the userOverlayTrigger example became a Popover which is used by a ContextualHelp component. The OverlayContainer wraps a Popover or ModalDialog component in every location that I want to open one of those, in this example that is ContextualHelp and UsernameDialog. I didn't get nested dialogs working or include the OverlayContainer in the Popover of ModalDialog components because that would deviate too much from the example code in the docs.

CodeSandbox Example

[angusd3v]

Thanks for the above. I kept working and realised that the key for nested modals to work as expected is for your the component that's calling useModal etc to be nested within another component that has its OverlayContainer. The OverlayContainer can't be rendered in the same component as the useModal calls otherwise it won't increment the provider's count properly and aria-hidden doesn't get applied. The docs example does show this but I didn't grok how critical it was because on the surface of it it all looks to work fine having them in the one component. I had some naming trouble figuring out what to call the outer "Modal" component that renders <OverlayContainer><InnerModal>{children}</InnerModal></OverlayContainer> but apart from that, all went smoothly.