Navigate to another page for back button causes bottom tab to disappear and swipes wrong direction

Question

I have added a back button to a screen but for some reason, the page will animate to the right rather than the left such as in the gif below. I would like for the page to swiping the other direction, giving the feel that you are going backward not forwards. I have not had this issue before. Also, it causes the bottom tab to disappear altogether. I am using a stack and have provided that below as well as all other necessary information I think you guys need.

Thank you for any insight at all! I appreciate it more than you know.

I am not sure if this is enough information to truly answer my question. Please do not hesitate to ask me to provide more!

Stack

      <Stack.Navigator>        
        <Stack.Screen name="Home" component= {MyTabs} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileScreen" component= {ProfileScreen} options={{headerShown: false}}/>
        <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileSettings" component= {ProfileSettingsScreen} options={{headerShown: false}}/>
      </Stack.Navigator>
    </NavigationContainer>

How I created the profile tab

<Tab.Screen
        name="Profile"
        component={profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}

Back button

<TouchableOpacity onPress={() => this.props.navigation.navigate('ProfileScreen')}>

Answer 1

As HijenHEK mentioned, changing it to navigation.goback() fixed the issue.

<TouchableOpacity onPress={() => this.props.navigation.goBack()}>