Can't open 2 routable modals

[thanhtran3k]

I'm working on a social media application which is similar to Instagram. I need to use the concept of routable modal for better UX following these articles:

https://dev.to/unorthodev/how-to-make-routable-modals-in-react-with-react-router-3hgp

Example: https://stackblitz.com/edit/react-routable-modal-ubkpar?file=src/Modal.jsx

But if I open a second modal inside of an existing modal, when I click backward (Or call history.goBack()) the first modal will reload completely. Any clues?

1. Open a card on the home screen (Card is the (1) modal)
2. Click on the "Click here to open test modal" to open the second modal (This is the (2) modal)
3. Cclick go back, and the (1) modal is reloaded.
   Expected: The (1) modal shouldn't be reloaded

Thanks for your time.

[thanhtran3k]

send help