Dynamic initialRouteName in BottomTabNavigator - React Navigation v5 - react-native

Question

I want to set a dynamic initialRouteName on my TabNavigator (not even sure if this is the right place to do it), let me explain more clearly.
I have a BottomTabNavigator with 4 items : Home (HomeStack), Explorer (ExplorerStack), subscriptions (SubscribeStack) & contact (contactStack). When the app load, with the token I was redirecting the user to my MainNavigator (so my BottomTabNavigator) with the initialRouteName Home.
<Stack.Navigator headerMode="none">
{!token ? (
<Stack.Screen
isSignout={isSignout}
name="AuthStack"
component={AuthNavigator}
/>
) : (
<Stack.Screen name="HomeStack" component={MainNavigator} />
)}
</Stack.Navigator>
What I want to do now is : when the user is not null and have no subscriptions I want to redirect him directly to the Explorer Tab and not the Home Tab.
// MainNavigator.js
const MainNavigator = (props) => {
const [loading, setLoading] = useState(true);
const [subs, setSubs] = useState([]);
const [fetchData, {data: meData}] = useLazyQuery(USER_ME_QUERY);
useEffect(() => {
fetchData();
if (meData) {
setSubs(meData.me.subscribes);
setLoading(false);
}
}, [meData]);
if (loading) {
return <Loading />;
}
return (
<Tab.Navigator
initialRouteName={subs.length > 0 ? 'Home' : 'Explorer' }
tabBarOptions={{
shadowColor: 'transparent',
showLabel: false,
style: {
backgroundColor: dark ? theme.color.secondary : theme.color.white,
elevation: 0, // for Android
borderTopColor: dark ? '#46505C' : theme.color.lightBorder,
},
}}>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon size={22} name="home" color={theme.color.primary} />
) : (
<Icon size={22} name="home" color={theme.color.lightGrey} />
),
}}
/>
<Tab.Screen
name="Explorer"
component={ExplorerStack}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon size={22} name="columns" color={theme.color.primary} />
) : (
<Icon size={22} name="columns" color={theme.color.lightGrey} />
),
}}
/>
<Tab.Screen
name="Subscribe"
component={SubscribeStack}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon size={22} name="sliders" color={theme.color.primary} />
) : (
<Icon size={22} name="sliders" color={theme.color.lightGrey} />
),
}}
/>
<Tab.Screen
name="Contact"
component={ContactStack}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon size={22} name="mail" color={theme.color.primary} />
) : (
<Icon size={22} name="mail" color={theme.color.lightGrey} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainNavigator;
Is there a simple way to achieve this ? Any help would be appreciated x
If you need more infos, feel free to ask :)
Thanks in advance x