Problem with nested NiceModal Provider

Steps to reproduce

1. Wrap the whole app with a NiceModal.Provider
2. Then use react-router or simple state to create 2 page
3. On page 1 use NiceModal.Provider to wrap all children
4. Add a button and simple Modal for page 1
5. On page 2 don't wrap it with a NiceModal.Provider
6. Add a button and simple Modal for page 2
7. Add buttons to switch between pages
8. Start the app

Case 1:

• Go to page 1 directly then click the button to open the dialog -> it works
• Go to page 2 by clicking the button we add in step 7 above then click the button to open the dialog -> it doesn't work

Case 2:

• Go to page 2 directly then click the button to open the dialog -> it works
• Go to page 1 by clicking the button we add in step 7 then click the button to open the dialog -> it works
• Go to page 2 by clicking the button we add in step 7 then click the button to open the dialog -> it doesn't work

Github repository

https://github.com/quangphuchuynh95/test-nice-modal

Codesandbox

https://codesandbox.io/s/wizardly-goldberg-rp3vtz?file=/src/index.js

Start by reproducing the nested-provider behavior in the linked GitHub repository or CodeSandbox, following the two cases described in the issue. Trace how page transitions and NiceModal.Provider nesting affect modal opening; done means dialogs open consistently on both pages regardless of navigation order.