createDrawerNavigator and createStackNavigator not working fine with each other.

I'm using createDrawerNavigator and createStackNavigator. But when I implemented Drawer Navigator in my app its disabling my navigationOption and defaultNavigationOption. I want different header title for each screen by navigationOptions and also I want to set same header background color for all over the app by defaultNavigationOptions. I also tried to set navigationOption in the class component but not working there also. I have tried several ways but not working good for me.
I'm using expo. react-navigation version is 3.11.1

----------Route.js-----------
import { createStackNavigator,
createAppContainer,
createSwitchNavigator,
createDrawerNavigator}
from 'react-navigation';

import Splash from '../app/component/Splash';
import Login from '../app/component/Login';
import SignUp from './component/signup';
import InitialScreen from './component/InitialScreen';
import CreateCircle from './component/CreateCircle';

export const AppDrawerNavigator = createDrawerNavigator(
{
initialScreen:{
screen: InitialScreen,
drawerLabel: "Initial Screen",
},
createCircle:{
screen: CreateCircle,
drawerLabel: "Create Circle",
}
},
{
drawerPosition: "left",
drawerWidth: 300,
},
)
// AppDrawerNavigator.navigationOptions = {
// title: 'My Chats',
// headerBackTitleVisible: false,
// headerStyle: {
// backgroundColor: '#87dfff',
// },
// headerTitleStyle: {
// textAlign:"center",
// flex:1
// },
// };

// THIS ABOVE COMMENTED THING WORKS BUT I WANT DIFFERENT HEADER NAME FOR ALL THE PAGES

const AppStack = createStackNavigator({

initialScreen:{
screen: InitialScreen,
navigationOptions: {
headerTitle: "Initial Screen" // Not showing me this title when I use createDrawerNavigator
}
},

createCircle:{
screen: CreateCircle,
navigationOptions: {
headerTitle: "Second Screen" // Not showing me this title when I use createDrawerNavigator
}
},
},
{
defaultNavigationOptions: {
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: '#87dfff',
},
headerTitleStyle: {
textAlign:"center",
flex:1
},
}
// defaultNavigationOptions also does not working after using createDrawerNavigator
}
)

const AuthStack = createStackNavigator({
login: {
screen: Login,
navigationOptions: {
header: null
}
},
signup:{
screen: SignUp,
navigationOptions: {
header: null
}
},
Drawer:{screen: AppDrawerNavigator } // if I Comment out this line, all navigationOptions working fine.
// but I want Drawer in my app
},
)
const SwitchNavigator = createSwitchNavigator(
{ Splash: Splash,
Auth: AuthStack,
App: AppStack
},
{initialRouteName : 'Splash'}
)

export default createAppContainer(SwitchNavigator)

--------App.js------------
import React from 'react'
import {View} from 'react-native'
import NavRoutes from './app/Routes'
export default class App extends React.Component{
render(){
return(

)
}
}

Bắt đầu trong Route.js, sau đó so sánh cấu hình lồng nhau của createDrawerNavigator và createStackNavigator với tài liệu navigation-options của React Navigation 3.x. Chạy ứng dụng Expo từ App.js và xác minh rằng mỗi màn hình drawer hiển thị tiêu đề đã cấu hình trong khi kiểu dáng header dùng chung vẫn được áp dụng; ghi lại cấu hình lồng nhau được hỗ trợ và mọi thay đổi cần thiết.