I was able to solve the issue, thanks to Luke's comment. The problem is not just limited to TouchableOpacity, but also affects other components such as Button and Pressable when using the onPress event in headerRight or headerLeft of Stack.Screen. By changing onPress to onPressIn, the issue was resolved for all these components. Here's the updated code:

<Stack.Screen
  name="notes/index"
  options={{
    title: "Dodo",
    headerRight: () => (
      <TouchableOpacity onPressIn={() => console.log("Button pressed!")}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    ),
  }}
/>

Thanks again to Luke for pointing me in the right direction!