React Native Navigation- goBack to pervious screen automatically without calling goBack() method - react-native

Question

I have used createStackNavigator for Normal navigation and createMaterialTopTabNavigator for Tab navigation
Nested navigation is acting strangely. I have a StackNavigator in App.tsx that contains ProfileHome.tsx. The ProfileHome.tsx contains Tab navigations that have four screens. I wanted to navigate to the PastWorkDetail.tsx screen which is a part of the StackNavigator from PastWork.tsx (Tab)
Whenever I navigate from PastWork (Tab) to PastWorkDetail, the screen PastWorkDetail appears and automatically redirects to the previous screen, which is PastWork (Tab)
App.tsx
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { RootStackParamList } from "./navigation/types";
import LoginHome from "./screens/login/LoginHome";
import SplashScreen from "./screens/login/SplashScreen";
import SocialMediaSelectPage from "./screens/preference/SocialMediaSelectPage";
import PastWorkDetail from "./screens/profile/PastWorkDetail";
import ProfileHome from "./screens/profile/ProfileHome";
const RootStack = createStackNavigator<RootStackParamList>();
const App = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<RootStack.Navigator
initialRouteName="LoginHome">
<RootStack.Screen name="LoginHome" component={LoginHome} />
<RootStack.Screen name="SocialMediaSelectPage" component={SocialMediaSelectPage}/>
<RootStack.Screen name="ProfileHome" component={ProfileHome} />
<RootStack.Screen name="PastWorkDetail" component={PastWorkDetail} />
<RootStack.Screen name="Test" component={Test} />
</RootStack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
};
export default App;
ProfileHome.tsx
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
import React from "react";
import { View } from "react-native";
import HeaderProfile from "../../components/header/HeaderProfile";
import PastWork from "./PastWork";
import Preferences from "./Preferences";
import Profile from "./Profile";
import TopTabBar from "./shared/TopTabBar";
import Stats from "./Stats";
interface TabItem {
name: string;
component: React.ComponentType<any>;
}
const tabs: TabItem[] = [
{ name: "Profile", component: Profile },
{ name: "Stats", component: Stats },
{ name: "Preferences", component: Preferences },
{ name: "Pastwork", component: PastWork },
];
const ProfileHome = () => {
const Tab = createMaterialTopTabNavigator();
return (
<View style={styles.container}>
<Tab.Navigator backBehavior="history" nitialRouteName="Profile" tabBar={(props) => <TopTabBar {...props} />}>
{
// Populating tabs
tabs.map((item: TabItem, index: number) => {
return (
<Tab.Screenkey={index} name={item.name} component={item.component}
options={{
tabBarLabel: item.name,
}}
/>
);
})
}
</Tab.Navigator>
</View>
);
};
export default ProfileHome;
PastWork.tsx
import { useNavigation } from "#react-navigation/native";
import React from "react";
import { Image, ImageSourcePropType, StyleSheet, View } from "react-native";
const images = [
require("../../assets/images/pastWork1.jpeg"),
require("../../assets/images/pastWork2.png")
];
const PastWork = () => {
const navigation = useNavigation();
const onPress = () => {
navigation.navigate("PastWorkDetail");
};
return (
<View style={styles.container}>
<View style={{ width: Utils.getWidth(45) }}>
{
images.map((item, index) => {
return (
<ImageView key={index} source={item} onPress={onPress} />
);
})
}
</View>
</View>
);
};
export default PastWork;
PastWorkDetail.tsx
import React from "react";
import { StyleSheet, View } from "react-native";
import Header from "../../components/header/Header";
const PastWorkDetail = () => {
return (
<View style={styles.container}>
<Header name="Pastwork Info" />
</View>
);
};
export default PastWorkDetail;