Navigation from nested stack navigators

Question

I have the following component and I have installed v6 react native navigation and when I try to navigate to sendMessageFromItem from Details screen, it just goes to the screen Chat. I also tried removing the initialroutename from chatstackscreen yet it was still going to the chat screen. if I move sendmessagefromitem screen to the the beginning, it actually navigates to it as it's the initial screen. but I want the initial screen to be chat and still be able to navigate to the sendmessagefromitem screen. how can I solve this problem?

const HomeStack = createNativeStackNavigator();
const ChatStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Detail" component={DetailScreen} />
      <HomeStack.Screen name="Information" component={InformationScreen} />
    </HomeStack.Navigator>
  );
};
const Detail({navigation,item})=>{
return (
<TouchableOpacity style={styles.chatvw} onPress={() => navigation.navigate("Chats", { screen: "SendMessageFromItem", params: { item } })}>
  <Text style={{ color: txtColr, textAlign: "center" }}>Chat</Text>
</TouchableOpacity>

)
}
const ChatStackScreen = () => {
  return (
    <ChatStack.Navigator initialRouteName = "Chat">
      <ChatStack.Screen name="SendMessageFromItem" component={SendMessageFromItemScreen} />
      <ChatStack.Screen name="Chat" component={ChatScreen} />
      <ChatStack.Screen name="Settings" component={SettingsScreen} />
    </ChatStack.Navigator>
  );
};

const App = () => {
  const Tab = createBottomTabNavigator();
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Chats" component={ChatStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};