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(

)
}
}

Start in Route.js, then compare the nested createDrawerNavigator and createStackNavigator configuration with the React Navigation 3.x navigation-options documentation. Run the Expo app from App.js and verify that each drawer screen shows its configured title while the shared header styling remains applied; document the supported nesting configuration and any required changes.