Demonstrates ionic-react bug when passing props and using the /:tab(name) feature

App.tsx

const App: React.FC = () => {
    const [parentState, setParentState] = useState({value: 0})
    console.log("PARENT STATE: ", parentState)

    useEffect(() => {

        setTimeout(()=>{
            setParentState({value: parentState.value + 1})
        }, 5000)

    }, [parentState])

    return (
        <IonApp>
            <RoutesComponent parentState={parentState} setParentState={setParentState}/>
        </IonApp>
    )
};

RoutesComponent.tsx

export const RoutesComponent:React.FC<any> = ({parentState, setParentState}) => {
    return (
        <IonReactRouter>
            <IonTabs>
                <IonRouterOutlet>
                    <Route exact path="/:tab(tab1)">
                        <Tab1 childStateValue={parentState.value}  />
                    </Route>
                    <Route exact path="/tab2">
                        <Tab2 />
                    </Route>
                    <Route path="/tab3">
                        <Tab3 />
                    </Route>
                    <Route exact path="/">
                        <Redirect to="/tab1" />
                    </Route>
                </IonRouterOutlet>
                <IonTabBar slot="bottom">
                    <IonTabButton tab="tab1" href="/tab1">
                        <IonIcon icon={triangle} />
                        <IonLabel>Tab 1</IonLabel>
                    </IonTabButton>
                    <IonTabButton tab="tab2" href="/tab2">
                        <IonIcon icon={ellipse} />
                        <IonLabel>Tab 2</IonLabel>
                    </IonTabButton>
                    <IonTabButton tab="tab3" href="/tab3">
                        <IonIcon icon={square} />
                        <IonLabel>Tab 3</IonLabel>
                    </IonTabButton>
                </IonTabBar>
            </IonTabs>
        </IonReactRouter>
    )
}

export default RoutesComponent;

Tab1.tsx

const Tab1: React.FC<any> = ({childStateValue}) => {
    console.log("CHILD STATE: ", childStateValue)

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Tab 1</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">Tab 1</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <ExploreContainer name={`Tab 1 page  - ${childStateValue}`}/>
            </IonContent>
        </IonPage>
    );
};

export default Tab1;