How to navigate between different stacks

In my App.tsx file I have 3 stacks as follows:

const AuthStack = createStackNavigator()
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen name="Login" component={Login} options={{headerShown:false}}/>
  </AuthStack.Navigator>
)

export const HomeStack = createStackNavigator()
export const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} options={{headerShown:false}}/>
    <HomeStack.Screen name="TestScreen" component={TestScreen} />
  </HomeStack.Navigator>
)

const RootStack = createStackNavigator()
const RootStackScreen = ({ isTokenValid }) => (
  <RootStack.Navigator headerMode="none">
    { isTokenValid 
    ? ( <RootStack.Screen name="App" component={HomeStackScreen} options={{headerShown:false}}/> ) 
    : ( <RootStack.Screen name="Auth" component={AuthStackScreen} options={{headerShown:false}}/> ) 
    }
  </RootStack.Navigator>
)

Then I return the following:

  return (
    <NavigationContainer>
      <RootStackScreen isTokenValid={props.isTokenValid}/>
  </NavigationContainer>
  );

In my Login.tsx after successful login I want to navigate to HomeScreen that's under HomeStackScreen so I call for navigation.navigate as such:

const doLogin = ()=>{
    issueToken(phoneNumber,otp).then(res => { 
        navigation.navigate('HomeStackScreen', { screen: 'Root' });
    }).catch(err => alert(err));
}

However the navigation fails with this message:

The action 'NAVIGATE' with payload {"name":"HomeStackScreen","params":{"screen":"Root"}} was not handled by any navigator.

How can I navigate correctly between the two stacks?