React Navigation nesting creates infinite loop

So I am using react navigation v5, and have run to this problem. My navigation starts at:

    
      const RootAppNavigator = () => {
        return(
        <RootApp.Navigator>
        <RootApp.Screen name="App" component={NavigationScreen} />
      </RootApp.Navigator>
        )
      }
    
    export default function App() {
    
      let [fontsLoaded] = useFonts({
        Lobster_400Regular,
      });
    
        // if (!fontsLoaded) {
        //   return <AppLoading />;
        // }
        return <NavigationContainer><RootAppNavigator /></NavigationContainer>;
      }

User is then redirected to NavigationScreen:

const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const Tab = createBottomTabNavigator();



export default function NavigationScreen() {

  const HomeStackNavigator = () => {
    return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen name="Home" component={HomeScreen}/>
    </HomeStack.Navigator>
    )
  }

  const ProfileStackNavigator = () => {
    return(
    <ProfileStack.Navigator initialRouteName="Profile" screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}}>
      <ProfileStack.Screen name="Profile" component={ProfileScreen}/>
    </ProfileStack.Navigator>
    )
  }
  
  return (
      <Tab.Navigator
      initialRouteName="HomeS"
      >
        <Tab.Screen name="HomeS" component={HomeStackNavigator} />
        <Tab.Screen name="ProfileS" component={ProfileStackNavigator} />
      </Tab.Navigator>
  );
}

Now for some reason I cannot understand, Home screen is rendered at first, but as soon as I click the profile screen on my Tab Navigator, the Profile screen is rendered but an infinite loop starts between those two screens.(Found it by logging in their componentDidMount function, switching is not visible on mobile though.). At some point the looping stops and I get a Maximum update depth exceeded error.

Any help would be much appreciated.