bug: React router not changing props

[victororlyk]

Bug Report

Ionic version:

[x] 4.6.3

Current behavior:

The router render is passing props only one time and remember the value not changing.If we click on button on page3 it should have passed new props to the component but it doesn't
Expected behavior:

on button click it should change name state and pass to the component new props;
Steps to reproduce:

Related code:

app.tsx

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

tab3.tsx

import React from 'react';
import { IonHeader, IonToolbar, IonPage, IonTitle, IonContent, IonButton } from '@ionic/react';


interface Tab3Props{
  name: string,
  setName: Function
}
const Tab3Page: React.FC<Tab3Props> = ({name, setName}) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab Three</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        <IonButton onClick={()=>setName('another')}>
          {name}
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Tab3Page;

Other information:

Ionic info:

[elylucas]

fixed in 4.11.6

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.