navigationOptions in react-navigation not work in typescript

I am changing react-native code from javascript to typescript and version upgrade.

but, react-navigationHeaderOptions not working. I can't find the reason.

DocumentNavigation.tsx

import {DocumentsScreen} from '../../screens/Documents/DocumentsScreen'
import DocumentsInFolder from '../../screens/Documents/DocumentsInFolder'

export default createStackNavigator({DocumentsScreen, DocumentsInFolder}, {
  headerMode: 'none', 
  navigationOptions: {
    gesturesEnabled: false,
  },
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
}),
})

DocumentsScreen.tsx

export const DocumentsScreen: NavigationScreenComponent<{}> = () =>  {
  return (
    <Container>
      <Text>Hello</Text>
    </Container>
  )
}
DocumentsScreen.navigationOptions = (props: NavigationScreenProps): NavigationStackScreenOptions => {
  return {
    title: "Documents",
    headerStyle: {
      elevation: 0,
      backgroundColor: "darkslategray"
    },
    headerLeft: (
      <HeaderLeft>
        <Buticon style={{width:25, height:25, marginLeft:10}} title={'Account'} image={require('../../../../assets/icons/home/account.png')}
          onPress={()=> props.navigation!.navigate('AccountScreen')}
        />
        <Buticon style={{width:25, height:25, marginLeft:10}} title={'Account'} image={require('../../../../assets/icons/home/tutorfind.png')}
          onPress={()=> props.navigation!.navigate('AccountScreen')}
        /> 
      </HeaderLeft>
    ),
    headerRight: (
      <View style={{flexDirection: 'row', width:100, justifyContent:'flex-end'}}>
        <Buticon style={{width:25, height:25, marginRight:10}} title={'Add'} image={require('../../../../assets/icons/home/add.png')}
        onPress={()=>{    
        })
        }}/>
      </View>
    )
  }
}
const HeaderLeft = styled.View`
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 200;

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

I expect just show navigation header. currently, header is entirely invisible. somebody help me plz.