bug: Using React Router <Switch> breaks passing state as child props

[mjog]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

This is identical to #19986 except with a Switch element inserted into the outlet:

const App: React.FC = () => {
  const [name, setName] = useState('Viktor');
  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Switch>
              <Route path="/tab3" render={(props: any) => <Tab3 {...{ name, setName}} />}/>
              <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
            </Switch>
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={send} />
              <IonLabel>Tab Three</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
}

Use same tab3 file as in OP.

Clicking the button in tab3 has no effect.

Expected Behavior

Clicking on the button on tab3 will set its text to "another".

Steps to Reproduce

1. Run app
2. Click button

Code Reproduction URL

https://stackblitz.com/edit/s6csesf4?file=src%2Findex.tsx

Ionic Info

Ionic v8
React 18 or 19 (neither work)

Additional Information

No response