React native Typescript Touchableopacity props error

I have created one reusable button by using Styled component and Typescript. I made onPress void. I am using this button to the headStyles. HeaderStyles have a one prop name headerLeft. headerLeft's props' onPress is optional or undefined. When I am passing this props to my Button then I got Typescript error as expected. This is the error: Type '(() => void) | undefined' is not assignable to type '() => void'. Type 'undefined' is not assignable to type '() => void'.ts(2322). Is there any way I made headerLeft props onPress void?

This is my reuseable Button component:

import React from 'react';import styled from 'styled-components/native';type Props = {  onPress: () => void;};const BackButtonContainer = styled.TouchableOpacity`  padding-vertical: 16px;  padding-horizontal: 24px;`;const Button = ({ onPress }: Props) => {  return (<BackButtonContainer      onPress={onPress}></BackButtonContainer>  );};export default Button;

This is headerStyles

import { StackNavigationOptions } from '@react-navigation/stack';import React from 'react';import Button from './buttons;export const headerStyles: StackNavigationOptions = {  headerStyle: {    elevation: 0,    borderBottomWidth: 0,    shadowOffset: { height: 0, width: 0 },  },  headerTitleAlign: 'center',  headerTintColor: colors.greyGradient[800],  headerLeft: (props) =>    props.canGoBack ? <Button onPress={props.onPress} /> : null, //In here I am getting typescript error};