Tengo esta barra de pestañas donde los elementos activos tienen otro icono que inactivo:

También cambiará el elemento con el onIonTabsDidChange onIonTabsDidChange de 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>

Mi problema es que cuando la página se carga por primera vez (sin ningún evento de cambio de pestaña) no mostrará el elemento correcto:

¿Cómo puedo lograr configurar el ícono en la primera carga también?

• ¡No puedo definir un valor predeterminado! Porque los usuarios podrían ingresar a la página desde una URL diferente (por ejemplo: el juego es la primera página)
• Busqué un enlace de inicio / carga pero no encontré ninguno