I am experiencing an odd bug with the React Native Navigation v5 headerRight Buttons. I currently have a TouchableOpacity set as a headerRight component in the react native navigation screen; however, the onPress event is not being triggered. There seems to be an invisible object in the middle of the header (title area) that has an absolute position, which prevents the onPress event from being registered. I tried playing around with the zIndex and headerMode values; however, the button is still not pressable. I can only press the button when it is placed on the far right of the screen (i.e. marginRight: 0). Any help would be greatly appreciated.

For reference, I am encountering the same issues as the following thread: https://github.com/react-navigation/react-navigation/issues/7052

Example of my Code

<StackNavigator.Navigator headerMode='screen'>
  <StackNavigator.Screen
    name='Home'
    component={HomeScreen}
    options={{
      headerRight: () => (
        <TouchableOpacity
          onPress={() => {}}
        >
          <Text>Button Text</Text>
        </TouchableOpacity>
      ),
    }}
  />
</StackNavigator.Navigator>