title: Using UIKitten Icon in Header options react navigation 5
body: <p>I have a stack/drawer navigation in my application. I'd like to be able to have a menu icon in my top header navigation that toggles the Drawer menu open and closed.</p>
  <p>This is my code:</p>
  <pre><code>import * as React from 'react';
  import { useNavigation, DrawerActions } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { TouchableOpacity } from 'react-native';
  import {
    Layout,
    Icon,
    Text,
    TopNavigation,
    TopNavigationAction,
  } from '@ui-kitten/components';
  import DrawerMenu from './DrawerMenu';
  
  const Stack = createStackNavigator();
  
  const MenuIcon = (props) =&gt; &lt;Icon name=&quot;menu&quot; {...props} /&gt;;
  
  const ToggleMenuAction = () =&gt; &lt;TopNavigationAction icon={MenuIcon} /&gt;;
  
  const MenuButton = () =&gt; (
    &lt;TopNavigation accessoryLeft={ToggleMenuAction} title=&quot;Eva Application&quot; /&gt;
  );
  
  const HeaderLeft = () =&gt; {
    const navigation = useNavigation();
    return (
      &lt;Layout style={{ flexDirection: 'row' }}&gt;
        &lt;TouchableOpacity
          onPress={() =&gt; {
            navigation.dispatch(DrawerActions.toggleDrawer());
          }}
        &gt;
          &lt;MenuButton /&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/Layout&gt;
    );
  };
  
  export default function AppStack() {
    return (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen
          options={{
            // eslint-disable-next-line react/display-name
            headerLeft: () =&gt; &lt;HeaderLeft /&gt;,
          }}
          component={DrawerMenu}
          name=&quot;Drawer&quot;
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  </code></pre>
  <p>I do not want to have the title next to my header button. What is odd is that when I remove the title field from</p>
  <pre><code>const MenuButton = () =&gt; (
    &lt;TopNavigation accessoryLeft={ToggleMenuAction} title=&quot;Eva Application&quot; /&gt;
  );
  </code></pre>
  <p>And make it just</p>
  <pre><code>const MenuButton = () =&gt; (
    &lt;TopNavigation accessoryLeft={ToggleMenuAction} /&gt;
  );
  </code></pre>
  <p>The toggle functionality just stops working. I have to click the menu button several times to make the menu toggle open and closed, but when the title is there, it works smoothly.</p>
  <p>Why would that be the case?</p>