Header title issues with React Navigation 5

Thanks Atul for giving the hint and I used a combination of headerMode and headerShown and this is my navigation code if anybody ever comes across this issue

// ----------- Auth Stack Navigator ----------------
const AuthStackNavigator = createStackNavigator();
const AuthNavigator = () => {
  return (
    <AuthStackNavigator.Navigator headerMode="screen">
      <AuthStackNavigator.Screen
        name="Auth"
        component={AuthScreen}
        options={{ title: "Getting Started", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="AuthPhone"
        component={AuthPhoneScreen}
        options={{ title: "Add Phone Number", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ResetPassword"
        component={ResetPasswordScreen}
        options={{ title: "Password Reset", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ChangePassword"
        component={ChangePasswordScreen}
        options={{ title: "Enter new password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{ title: "Forgot password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Login"
        component={LoginScreen}
        options={{ title: "Login", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Register"
        component={RegisterScreen}
        options={{ title: "Sign up to continue", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="VerificationMailSent"
        component={VerificationMailSentScreen}
        options={{
          title: "Verification mail sent",
          headerTitleAlign: "center",
        }}
      />
      <AuthStackNavigator.Screen
        name="VerifyMail"
        component={VerifyMailScreen}
        options={{ title: "Verifying your email", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="TermsAndConditions"
        component={TermsAndConditionsScreen}
        options={{ title: "Terms and Conditions", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicyScreen}
        options={{ title: "Privacy Policy", headerTitleAlign: "center" }}
      />
    </AuthStackNavigator.Navigator>
  );
};

// ----------- Home Stack Navigator ----------------
const HomeStackNavigator = createStackNavigator();
const HomeNavigator = () => {
  return (
    <HomeStackNavigator.Navigator headerMode="screen">
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
    </HomeStackNavigator.Navigator>
  );
};

// ----------- My Spaces Stack Navigator ----------------
const MySpacesStackNavigator = createStackNavigator();
const MySpacesNavigator = () => {
  return (
    <MySpacesStackNavigator.Navigator headerMode="screen">
      <MySpacesStackNavigator.Screen
        name="MySpaces"
        component={MySpacesScreen}
        options={{ title: "My Spaces" }}
      />
    </MySpacesStackNavigator.Navigator>
  );
};

// ----------- Account Stack Navigator ----------------
const AccountStackNavigator = createStackNavigator();
const AccountNavigator = () => {
  return (
    <AccountStackNavigator.Navigator headerMode="screen">
      <AccountStackNavigator.Screen
        name="Account"
        component={AccountScreen}
        options={{ title: "My Account" }}
      />
      <AccountStackNavigator.Screen
        name="MyProfile"
        component={MyProfileScreen}
        options={{ title: "My Profile" }}
      />
      <AccountStackNavigator.Screen
        name="RecentSearches"
        component={RecentSearchesScreen}
        options={{ title: "Recent Searches" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinHistory"
        component={CheckinHistoryScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinMonthlyList"
        component={CheckinMonthlyListScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseHistory"
        component={PurchaseHistoryScreen}
        options={{ title: "Purchase History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseDetails"
        component={PurchaseDetailsScreen}
        options={{ title: "Purchase Details" }}
      />
      <AccountStackNavigator.Screen
        name="Support"
        component={SupportScreen}
        options={{ title: "Support" }}
      />
      <AccountStackNavigator.Screen
        name="Faq"
        component={FaqScreen}
        options={{ title: "FAQ" }}
      />
      <AccountStackNavigator.Screen
        name="CouponCodes"
        component={CouponCodesScreen}
        options={{ title: "Coupon Codes" }}
      />
    </AccountStackNavigator.Navigator>
  );
};

// ----------- Bottom Tabs Navigator ----------------
const BottomTabNavigator = createBottomTabNavigator();
const BottomNavigator = () => {
  return (
    <BottomTabNavigator.Navigator>
      <BottomTabNavigator.Screen name="Home" component={HomeNavigator} />
      <BottomTabNavigator.Screen
        name="MySpaces"
        component={MySpacesNavigator}
      />
      <BottomTabNavigator.Screen name="Account" component={AccountNavigator} />
    </BottomTabNavigator.Navigator>
  );
};

// ----------- Final Stack Navigator ----------------
const FinalStackNavigator = createStackNavigator();
export const FinalNavigator = () => {
  const authContext = useContext(AuthContext);
  return (
    <FinalStackNavigator.Navigator>
      {authContext.isLoggedIn ? (
        <FinalStackNavigator.Screen
          name="Account"
          component={BottomNavigator}
          options={{ headerShown: false }}
        />
      ) : (
        <FinalStackNavigator.Screen name="Auth" component={AuthNavigator} />
      )}
    </FinalStackNavigator.Navigator>
  );
};

The AppNavigator.tsx code is unchanged but pasting here for reference

AppNavigator.tsx

    export const AppNavigator = (props: any) => {
      return (
        <NavigationContainer>
          <FinalNavigator />
        </NavigationContainer>
      );
    };

You can add headerMode="none" in

 <FinalStackNavigator.Navigator
headerMode="none">

and

  <AccountStackNavigator.Navigator
        headerMode="none">

to hide all the headers. and then can add a custom header on that particular page

You have to do it in Stack Navigator. Options = {{headerShown:false}}