React Native Stack Navigator only working from home? - reactjs

Question

I have a scenario where I'm trying to use multiple stack navigators within my React Native application.
At the moment I have a StackNavigator set up within
navigation>Home.js
I want a second StackNavigator set up for my ProfileScreen so I have created a second file navigation>ProfileStack.js
Ideally I'd really not want to have the home containing the stack screen because a user can not go from Home > EditProfileScreen. This also causes a bit of a bug where when the app on launch it loads the profile first and if you select edit profile it says "The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator."
However if I open the drawer navigator, go to the home page, then back through the drawer navigator to the profile page, I can go into edit profile. Though the stack when you swipe back goes to home and not the profile page. I understand this is because currently the Home.js contains the Stack.Screens. (It doesn't work if I don't have them there)
Big explanation but thought a lot of detail was better than minimal. The app.js renders the which contains the drawer navigator which loads on launch.
**ProfileStack.js**
import React from 'react';
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import EditProfileScreen from '../screens/EditProfileScreen';
import { NavigationContainer } from '#react-navigation/native';
import ProfileScreen from '../screens/ProfileScreen';
import UserFavouritesScreen from '../screens/UserFavouritesScreen';
const Stack = createNativeStackNavigator();
function ProfileStack(props) {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="ProfileScreen" component={ProfileScreen}/>
<Stack.Screen name="EditProfileScreen" component={EditProfileScreen}/>
<Stack.Screen name="UserFavouritesScreen" component={UserFavouritesScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default ProfileStack;
**Home.js**
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer'
import HomeScreen from '../screens/HomeScreen';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { KeyboardAvoidingView, Platform } from 'react-native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import MapScreen from '../screens/MapScreen';
import WalkingScreen from '../screens/WalkingScreen';
import TourDetail from '../screens/TourDetail';
import { TouchableOpacity } from 'react-native';
import tw from 'twrnc';
import { Icon } from "react-native-elements";
import { useNavigation } from "#react-navigation/native";
import EditProfileScreen from '../screens/EditProfileScreen';
import ProfileScreen from '../screens/ProfileScreen';
import UserFavouritesScreen from '../screens/UserFavouritesScreen';
const HomeNavigator = (props) => {
const Stack = createNativeStackNavigator();
const navigation = useNavigation();
return (
<KeyboardAvoidingView //This ensures that the keyboard does not hide whats behind
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{flex: 1}}
keyboardVerticalOffset={Platform.OS === "ios" ? -64 : 0}
>
<TouchableOpacity
onPress={() => navigation.toggleDrawer()}
style={tw`bg-gray-100 absolute top-16 left-8 z-50 p-3 rounded-full shadow-lg`}>
<Icon name="menu" />
</TouchableOpacity>
{/* <AuthStack /> */}
<Stack.Navigator
screenOptions={{headerShown: false, }}
>
<Stack.Screen name='HomeScreen' component={HomeScreen} />
<Stack.Screen name='MapScreen' component={MapScreen} />
<Stack.Screen name='WalkingScreen' component={WalkingScreen} />
<Stack.Screen name='TourDetail' component={TourDetail} />
*<Stack.Screen name="ProfileScreen" component={ProfileScreen}/>
<Stack.Screen name="EditProfileScreen" component={EditProfileScreen}/>
<Stack.Screen name="UserFavouritesScreen" component={UserFavouritesScreen}/>*
</Stack.Navigator>
</KeyboardAvoidingView>
);
};
export default HomeNavigator;
```