navigationをcompoent渡すことができないです

Question

前提・実現したいこと

headerのDrawerButtonをcomponent化したいです。
ですが、buttonを押すと下記のようにerrorがでます。

発生している問題・エラーメッセージ

TypeError: undefined is not an object (evaluating 'props.navigation.dispatch')

Button.props.onPress
    HeaderDrawer.tsx:9:25
createReactClass$argument_0.touchableHandlePress
    TouchableOpacity.js:264:45
touchableHandlePress
    [native code]:0
TouchableMixin._performSideEffectsForTransition
    Touchable.js:880:34
_performSideEffectsForTransition
    [native code]:0
TouchableMixin._receiveSignal
    Touchable.js:779:44
_receiveSignal
    [native code]:0
TouchableMixin.touchableHandleResponderRelease
    Touchable.js:490:24
touchableHandleResponderRelease
    [native code]:0
forEach
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

該当のソースコード

/componet/HeaderDrawer/index.tsx

import * as React from 'react';
import {Button} from 'react-native';
import {DrawerActions} from '@react-navigation/native';

const HeaderButton = props => {
  return (
    <Button
      onPress={() => {
        props.navigation.dispatch(DrawerActions.openDrawer());
      }}
      title="button"
    />
  );
};

export default HeaderButton;

app.tsx

const HomeScreen = ({navigation}) => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={{
          headerLeft: () => HeaderDrawer(navigation),
        }}
      />
    </HomeStack.Navigator>
  );
};

試したこと

このように書くと動くのですが、誰か教えて下さいお願いいたします(m__m)

app.tsx

const HomeScreen = ({navigation}) => {
  const HeaderButton = () => {
    return (
      <Button
        onPress={() => {
          snavigation.dispatch(DrawerActions.openDrawer());
        }}
        title="button"
      />
    );
  };
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={{
          headerLeft: () => HeaderButton(),
        }}
      />
    </HomeStack.Navigator>
  );
};