ReactNative Невозможно обновить компонент изнутри тела функции ›другого компонента

Мой компонент HomeHeader выглядит следующим образом:

import React from 'react'
import { View, StyleSheet, Text, Image } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome5';


export default function HomeHeader({navigation}) {


    return (
        <View style={styles.home_header}>
            <Icon style={styles.menu} name="bars" size={30} color="white" 
                onPress={ navigation.toggleDrawer() }
            />

            <Image
                style={styles.header_logo}
                source={require('../assets/logo.png')}
            />
            <Text>Hello</Text>
        </View>
    )
}

И я использую его на своем главном экране следующим образом:

return (
    <View>
      <HomeHeader navigation={navigation} />
    </View>
)

Но я получаю это сообщение об ошибке:

Предупреждение: невозможно обновить компонент изнутри тела функции другого компонента.

Что я пытаюсь сделать, так это то, что я выделил раздел заголовка моего HOME экрана в отдельный компонент под названием HomeHeader. И в этом компоненте я прикрепляю обработчик событий, чтобы переключать открытие / закрытие DrawerNavigation (левое меню ящика)

Если я создаю кнопку на своем домашнем экране и добавляю обработчик событий для переключения ящика, он работает нормально. Но проблема возникает, только если я попробую сделать это из моего компонента HomeHeader.

Кстати, я использую ReactNavigation v5, и я пробовал этот метод: https://reactnavigation.org/docs/connecting-navigation-prop/

Пока не повезло.