React navigation initialRouteName property not working as expected

Question

In my react native app I nested stack navigation inside the tab navigation. I can't access the screen that I set as an initial route in stack navigation.

The tab navigation component is

<Tab.Navigator initialRouteName='HomeNav' >
  <Tab.Screen name="HomeNav" component={HomeNav}
    options={{
      tabBarIcon: ({ color, size }) => (
        <FIcon name="home" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen name="Search" component={Search}
    options={{
      tabBarIcon: ({ color, size }) => (
        <FIcon name="search" color={color} size={size} />
      )
    }}
  />

  <Tab.Screen name="Cart" component={Cart}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MCIcon2 name="cart" color={color} size={size} />
      )
    }}
  />
  <Tab.Screen name="AccountNav" component={AccountNav}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MCIcon2 name="account" color={color} size={size} />
      )
    }}
  />
</Tab.Navigator >

And here is the account navigation component

const AccountNav = () => {
return (
    <Stack.Navigator
        initialRouteName="Account"
        screenOptions={{
            headerShown: false
        }}
    >
        <Stack.Screen name="Account" component={Account} />
        <Stack.Screen name="MyOrders" component={MyOrders} />
        <Stack.Screen name="Profile" component={Profile} />
    </Stack.Navigator>
);

when I try to navigate to MyOrders screen from the other screens. it gets stuck and cannot access the initial route screen (Account).