docs(modal): add correct card-style modal usage for react

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: resolves #21773

What is the new behavior?

• Updated usage to pass in IonRouterOutlet ref

Does this introduce a breaking change?

• Yes
• No

Other information

[pritamsoni-hsr]

this one is not working properly, see this, the app is active again because I set showModal = false using onWillDismiss, and if you'd inspect the DOM, all modals are present in the DOM.

[liamdebeasi]

You might need to do routerRef.current.current. React sometimes gives back a nested ref for IonRouterOutlet.

[pritamsoni-hsr]

@liamdebeasi when modal is presented in card style, color of status bar should change, any plan of adding that to ionic-core?

[liamdebeasi]

See #20501

[pritamsoni-hsr]

with 5.3.1 update, routerRef.current will work.

[liamdebeasi]

I'll make a PR to update the docs. Thanks!