Header Title not working when stacknavigator is nested with DrawerNavigator

I have three navigators, AuthStackNavigator for Auth, and DrawerNavigator and AppStackNavigator. So AuthStackNavigator is nested to DrawerNavigator and DrawerNavigator is nested to AppStackNavigator.

The problem is , When navigating from DrawerNavigator to AppStackNavigator, it continues to show header titles of DrawerNavigator , But expected is header titles of AppStackNavigator. ( As of now i have mentioned header:null as it shows dual header ) How to solve this issues ?

Navigators code:

   const AppStackNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
 header: null
}
},
StoreList: {
screen: StoreList,
navigationOptions: {
  header: null
 }
 },
});

const DrawerNavigator = createDrawerNavigator({
Dashboard: {
  screen: AppStackNavigator,
  navigationOptions: {
    drawerLabel: "Home",
  }
},
Training: {
  screen: Training,
  navigationOptions: {
    drawerLabel: "Training"
  }
},
RoutePlan: {
  screen: RouteCalendar,
  navigationOptions: {
    drawerLabel: "Route Plan"
  }
}
},
{
contentOptions: {
  activeTintColor: '#127CC1',
},
contentComponent: props => <DrawerComponent {...props}/>,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions : ({navigation}) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;
  return {
      headerTitle,
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
 }
);

const AuthStackNavigator = createStackNavigator(
{
LoginScreen: {
screen: Login,
navigationOptions: {
  headerTransparent: true
}
},
 Drawer: DrawerNavigator,
});

Please guide me through this !