bug: react, dynamic tab button does not get selected class set

# Bug Report

**Ionic version:**
[x] **5.6.4**

**Current behavior:**

I have an application that must display tab buttons dynamically depending on if the user is authenticated or not. It appears that if a user is routed to a page before its matching tab button is rendered on the page, the button does not receive the "selected" property.

Video recreation here (explanation of what you see in the video beneath): https://streamable.com/lkqvns

1. I first show when on the Profile page, the tab is highlighted to match the url in the browser as expected. This tab is displayed because the user object in the `useAuth` context is populated.
2. I refresh the page, which resets the user property to undefined which means that the Login tab should display.

I define my dynamic tab buttons like the following in my `App.tsx`:

```
{user ? (


Profile

) : (


Login

)}
```

3. In order to simulate a "network call" to authenticate, I have a `useEffect` in my `Auth` context that sleeps for a few seconds before populating the `user` object.
4. Since the user is now populated in the context, the displayed tab switches from Login to Profile as expected, however the tab itself doesn't display as "selected" even though we are on the `/profile` URL as defined in my `App.tsx`

CodeSandbox recreation: https://codesandbox.io/s/adoring-cori-xhu13?file=/src/Auth.tsx

Obviously it seems like the tab bar needs an additional re-render to apply the `selected` class because if I add a `setLoading(true)` and `setLoading(false)` within the "network call" to populate the user object in my Auth context, it causes the tab to update and show as "selected". I left these `useState`'s in my code but commented them out for you to mess with in `Auth.tsx` line 47.

I understand that this may seem like a weird test scenario but I'm dealing with something very similar after re-routing on authentication that causes the the current tab to not show as "selected" which will sometimes also result in the login form HTML being displayed on a **completely different tab than it should**. I was able to re-create the "selected" scenario here using this basic use case and I'm betting it'll fix the issue in my full app due to it rendering and setting the tabs correctly. I hope that makes sense.

NOTE: THE URL IN CODESANDBOX MUST BE "/profile" as shown in the demo video. A super easy way to recreate this issue is to type that url in the codesandbox url input and hit enter. The page will refresh and it'll recreate the above scenario!

**Expected behavior:**

I expect that the "selected" tab should be highlighted depending on if it matches the url in the browser.

**Ionic info:**

```
@ionic/react: 5.6.4
@ionic/react-router: 5.6.4
react-router-dom: 5.1.2
```