Changing the header text when navigating between Bottom Tab Screens

I have a React Native App that utilizes a Bottom Tab Navigator, as well as a Drawer Tab Navigator. There are 5 different bottom tab screens, that are each supposed to have a different heading. While I am able to navigate between the different bottom tabs, the text on the top remains constant between different screens. I currently have the bottom tabs content bundled into the "MainTabScreen." I then call the MainTabScreen out in "Drawer Navigator" as the "Home Drawer." I then export all these drawers into a "Stack Manager" which is the only content in my App.js file

Below is my code:

Code for the MainTabScreen, contains the different bottom tab screens, and their headings.

     import  Screen1  from './Screen1'
     import  Screen2  from './Screen2'
     import  Screen3  from './Screen3'
     import  Screen4  from './Screen4'
     import  Screen5  from './Screen5'
    
     const HomeStack = createStackNavigator();
     const Tab = createMaterialBottomTabNavigator();
                    
   <HomeStack.Navigator     
        screenOptions={{
            headerStyle:{
            backgroundColor:"#fff",
            },
            //headerTintColor: '#009387',
            gestureEnabled: false,
            headTintColor: '#fff',
            headerTitleStyle:{
            fontWeight: 'bold',
        }
    }}>

<HomeStack.Screen
        name="Home"
        component={ BorderScreens }
        options={{
            title: i18n.t('Screen1'),               
        headerLeft: () =>(
            <Icon.Button name = "menu" 
                size={25} 
                backgroundColor="#fff" 
                color="#009387" 
                onPress={() => navigation.openDrawer()}>
            </Icon.Button>
            )
        }}/>

<HomeStack.Screen
    name="Community Screen"
    component={ Screen2 }
    options={{
        title: i18n.t('Screen2'),           
        headerLeft: () =>(
            <Icon.Button name = "menu" 
                 size={25} 
                 backgroundColor="#fff" 
                 color="#009387" 
                 onPress={() => navigation.openDrawer()}>
            </Icon.Button>
            )
    }}/>

<HomeStack.Screen
    name="Screen3"
    component={ Screen3 }
    options={{
        title: i18n.t('Screen3'),           
        headerLeft: () =>(
            <Icon.Button name = "menu" 
                  size={25} 
                  backgroundColor="#fff" 
                  color="#009387" 
                  onPress={() => navigation.openDrawer()}>
            </Icon.Button>
             )
}}/>

<HomeStack.Screen
    name="Screen4"
    component={ Screen4 }
    options={{
        title: i18n.t('Screen4'),           
        headerLeft: () =>(
            <Icon.Button name = "menu" 
                  size={25} 
                  backgroundColor="#fff" 
                  color="#009387" 
                  onPress={() => navigation.openDrawer()}></Icon.Button>
            )
            }}/>

<HomeStack.Screen
    name="Screen5"
    component={ Screen5 }
    options={{
        title: i18n.t('Screen5'),           
        headerLeft: () =>(
            <Icon.Button name = "menu" 
              size={25} 
              backgroundColor="#fff" 
              color="#009387" 
              onPress={() => navigation.openDrawer()}></Icon.Button>
            )
            }}/>

</HomeStack.Navigator>

  )
}
export default MainTabScreen;

function BorderScreens({navigation}){
    return(
    <Tab.Navigator
    initialRouteName="Home"
        screenOptions={{
            headerStyle:{
                
            },
            gestureEnabled: false,
            headerTintColor: '#fff',
            headerTitleStyle:{
                fontWeight: 'bold',
            }
        }}
        >

        <Tab.Screen
            name="       "
            component={Screen1}
            options={{                  
                tabBarColor: '#fff',
                tabBarIcon:({color}) =>(
                    <Icon name ="home" 
                          size={26}/>
                    ),
            }}
            />

        <Tab.Screen
            name="     "
            component={Screen2}
            options={{                  
                tabBarColor: '#fff',
                tabBarIcon:({color}) =>(
                    <Icon name ="account-group" size={26}/>
                    ),
            }}
            />

        <Tab.Screen
            name=" "
            component={Screen3}
            options={{
                //title: '  ',
                tabBarColor: '#fff',
                tabBarIcon:({color}) =>(
                    <Icon name ="shield" size={26}/>
                    ),
            }}
            />

        <Tab.Screen
            name="   "
            component={Screen4}
            options={{                  
                tabBarColor: '#fff',
                tabBarIcon:({color}) =>(
                    <Icon name ="spa" size={26}/>
                    ),
            }}
            />

        <Tab.Screen
            name="    "
            component={Screen5}
            options={{                  
                tabBarColor: '#fff',
                tabBarIcon:({color}) =>(
                    <Icon name ="account" size={26}/>
                    ),
            }}
            />

    </Tab.Navigator>
    )
    }

Code for the Drawer Navigator which should be present in every bottom tab screen

<Drawer.Section style = {styles.drawerSection}>

                    <DrawerItem
                        icon={({color, size})=> (
                            <Icon
                                name="home"
                                color="black"
                                size={height*0.04}
                            />
                        )}
                        label={i18n.t('home')}
                        onPress={()=> {props.navigation.navigate('MainTabScreen')}}
                    />
                </Drawer.Section>

Code for how these link together in the stack navigator which exports this to the app

return (

    

<NavigationContainer>

    { user ? (
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props}/>}
                              screenOptions={{
                                  gestureEnabled: false,
                              }} initialRouteName={HomeScreen}
            >

                <Drawer.Screen name="HomeScreen" 
                               component={MainTabScreen} 
                    options = {({route}) => ({ headerTitle: getHeaderTitle(route),
                    })}
                />
...
             </Drawer.Navigator>
           )
           :
         </SignInStackScreen>
        }
</Navigation.Container