how to solve Property 'navigation' does not exist on type 'Readonly&

I have the following two pieces of code:

CustomHeader.tsx

import { View, StyleSheet, Button } from 'react-native';import { NavigationScreenProps } from 'react-navigation';import Icon from 'react-native-vector-icons/Ionicons';export  const CustomHeader = ({ navigation }: NavigationScreenProps) => (<View style={[styles.container]}><Icon        name="md-menu"        size={32}        color="black"        style={{ marginLeft: 10 }}        onPress={() => navigation.openDrawer()}      /></View>  );  const styles = StyleSheet.create({    container: {      borderBottomWidth: 2,      height: 70,      paddingTop: 20,    },  });

DetailScreen.tsx

import React from 'react';import { Text, View, Button, Alert } from 'react-native';import { NavigationScreenProps } from "react-navigation";import { CustomHeader } from '../components/Header';export class ChangeAccountDetailScreen extends React.Component {  render() {    return (<View style={{ flex: 1 }}><CustomHeader navigation={this.props.navigation} /><Text style={{ fontSize: 20 }}>Profile Screen</Text></View>    );  }}

In detailscreen i get the following error:

Property 'navigation' does not exist on type 'Readonly<{}>& Readonly<{ children?: ReactNode; }>'.

I searched for the issue and i understand it has something the fact that i am not declaring a type in my CustomHeader. However i do not know how to solve this. I am kinda new to typescript. Could someone explain to me how to fix this type issue?