React Navigation HeaderLeft can't access Screen State - react-native

Question

Tech stack: Expo, React Native, React Navigation
I created a basic Edit Profile screen for a user in my app and noticed that when I called an onPress function from the HeaderLeft/Right of that page to save the changes, the updated user fields tracked in state and set from a TextInput weren't being updated properly in the onPress function. Eventually I solved the issue by putting a button on the page to call the function which updated the user fields instead of calling the same function in the headers, but I don't understand why this wasn't working and how might it work.
Below are the important code snippets. Thank you! also looks similar to: React Navigation - access state inside setOptions() headerRight callback
EditProfileScreen
const { user, setUser } = useContext(AuthContext);
const [firstName, setFirstName] = useState(user?.firstName ?? "");
const [lastName, setLastName] = useState(user?.lastName ?? "");
useEffect(() => {
navigation.setOptions({
headerLeft: () => (
<Pressable onPress={() => navigation.goBack()}>
<Text>Cancel</Text>
</Pressable>
),
headerRight: () => (
<Pressable onPress={() => saveProfile()}>
<Text>Save</Text>
</Pressable>
),
});
}, [navigation]);
const saveProfile = () => {
console.log("first name user", user.firstName);
console.log("first name ", firstName); // why is this empty?????
console.log("last name user", user.lastName);
console.log("last name ", lastName);
}
<TextInput
style={styles.input}
maxLength={25}
activeUnderlineColor="grey"
placeholder=""
value={firstName}
onChangeText={(newFirstName) => setFirstName(newFirstName)} // i also tried onChangeText={setFirstName}
/>