I have this tab-bar where active elements have another icon than inactive:

It will also change the item with the onIonTabsDidChange-hook from IonTabBar:

const [activeTab, setActiveTab] = useState<string>()

return 
<IonTabBar onIonTabsDidChange={(event) => setActiveTab(event.detail.tab)}>
  <IonTabButton  tab="explore" href="/explore">
    {activeTab === 'explore' ? <HomeIconSolid /> : <HomeIcon />}
  </IonTabButton>
  <IonTabButton tab="game" href="/game" >
    {activeTab === 'game' ? <PlayIconSolid/> : <PlayIcon />}
  </IonTabButton>
</IonTabBar>

My problem is that when the page is loaded first time (without any change Tab events) it will not display the correct item:

How can I achieve to set the icon at first load as well?

• I'm not able to define a default! Because users could enter the page from a different url (e.g.: game is the first page)
• I searched for an init / load hook but didn't find one