React Native v.5 navigation.goBack() prop navigates to the wrong screen

I have an app with 5 screens: Screens 1, 2, 3, 4, 5

Screen 1 is the "Home Screen" (which is also the landing screen after signing in) Screen 2 is the "Next Screen" (which follows the Home Screen) Screen 3 is the "Other Screen" (which follows screen 2) Screen 4 is the "Chat Screen" (where users could chat with one another) Screen 5 is Profile Screen (which lives in a "Drawer Navigator that is only accessible from the Home Screen)

A user can access the Chat Screen from either Screen 2 or Screen 3, so I assigned a "navigation.goBack()" prop to the button, so the user would always return to either Screen 2, or Screen 3, depending where they are coming from

This feature works fine, unless a user happens to go to the "Profile Screen" before navigating to Screen 2, or Screen 3.

When a user clicks the "goBack" button, they navigate from the chat screen, to the "Profile Screen" even though they were previously in Screen 2 or Screen 3.

When pressing the "Home" icon on the drawer, they end up back in the "Chat Screen" and end up stuck in this loop.

How do I make the navigator understand to return to the previous screen, and not a screen they were at in the drawer navigator?

Here's how it looks drawn out:

(Start) Screen 1 => Screen 2=> Screen 4 =>(goBack) Screen 2 (This is functions normally)

(Start) Screen 1 => Screen 5 => Screen 1 => Screen 2 => Screen 4 =>(goBack) Screen 2 (How it should function)

(Start) Screen 1 => Screen 5=> Screen 1 => Screen 2 => Screen 4 =>(goBack) Screen 5 (What it's doing)

EDIT: Here is some of the code

//Code that builds the main tab navigator

const MainTab = createStackNavigator();

function MainTabScreen ({ navigation }){
  return(

<MainTab.Navigator screenOptions ={{
      headerStyle:{
          backgroundColor:"#009387" ,        
        },
        gestureEnabled: false,
        headerTintColor: '#fff', 
        headerTitleStyle: {
          fontWeight: 'bold',
          fontSize: height*0.023,
          textAlign: 'center',

        }
    }}>

    <MainTab.Screen name = "Home" component={HomeScreen} options= {{
      title: '',
        headerLeft: () => (
          <Icon.Button name = "menu" size={25} backgroundColor= "#009387" onPress={ () => navigation.openDrawer()}> </Icon.Button>
          ), 
      }}/>

      <MainTab.Screen name = "NextScreen" component={NextScreen} options= {{
        title: i18n.t(''),
        headerLeft: () => (
          <Icon.Button name = "arrow-left" size={25} backgroundColor= "#009387" onPress={ () => navigation.navigate('HomeScreen')}/> 
          ) 
      }}/>

      <MainTab.Screen name = "OtherScreen" component={OtherScreen} options= {{
        title: i18n.t('') ,
        headerTintColor: '#fff',
        headerLeft: null,
      }}/>

      <MainTab.Screen name = "ChatScreen" component={ChatScreen} options= {{
        title: '' ,
        headerTintColor: '#fff',
        headerLeft: ()=>(
        <Icon.Button name = "arrow-left" size={25} backgroundColor= "#009387" onPress={ () => navigation.goBack()}/>          
        )
      }}/>


  </MainTab.Navigator>

  )}

Code that creates the Drawer tab

export function DrawerContent (props){
    return(
          <Drawer.Section>
          <DrawerItem
              icon={({color, size }) => (
                <Icon 
                  name="home-outline"
                  color={color}
                  size={height*0.032}
            />
            )}
            label= {i18n.t('')}
            onPress={()=>{props.navigation.navigate('HomeDrawer')}}
            />

            <DrawerItem
              icon={({color, size }) => (
              <Icon 
                name="account-outline"
                color={color}
                size={height*0.032}
                />
              )}
            label= {i18n.t('')}
            onPress={()=>{props.navigation.navigate('ProfileStackScreen')}}
            />
        </Drawer.Section>

   
      )
  }

Code that combines the two into a "StackApp" that is exported into the App.js file

const Drawer = createDrawerNavigator();
    function StackApp2() {

  return (
    
    
      <NavigationContainer theme = { theme }>
      
        
      <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}
      screenOptions = {{
        gestureEnabled: false,
      }}>

        <Drawer.Screen name="HomeDrawer" component={MainTabScreen} /> 
        <Drawer.Screen name="ProfileStackScreen" component={ProfileStackScreen} /> 

      </Drawer.Navigator>

      )
    }
    </NavigationContainer>

    export default StackApp2