title: React Navigation 5 headerRight button function called doesn't get updated states
body: <p>In the following simplified example, a user updates the label state using the TextInput and then clicks the 'Save' button in the header. In the submit function, when the label state is requested it returns the original value '' rather than the updated value.</p>
  
  <p>What changes need to be made to the navigation headerRight button to fix this issue?</p>
  
  <p>Note: When the Save button is in the render view, everything works as expected, just not when it's in the header.</p>
  
  <pre><code>import React, {useState, useLayoutEffect} from 'react';
  import { TouchableWithoutFeedback, View, Text, TextInput } from 'react-native';
  
  export default function EditScreen({navigation}){
    const [label, setLabel] = useState('');
  
    useLayoutEffect(() =&gt; {
        navigation.setOptions({
          headerRight: () =&gt; (
            &lt;TouchableWithoutFeedback onPress={submit}&gt;
              &lt;Text&gt;Save&lt;/Text&gt;
            &lt;/TouchableWithoutFeedback&gt;
          ),
        });
      }, [navigation]);
  
    const submit = () =&gt; {
      //label doesn't return the updated state here
      const data = {label: label}
      fetch(....)
    }
  
    return(
      &lt;View&gt;
        &lt;TextInput onChangeText={(text) =&gt; setLabel(text) } value={label} /&gt;  
      &lt;/View&gt;
    )
  
  }
  </code></pre>