maybe this question has been asked before, but unfortunately I was unable to find the answer.

I have got a screen called AccountManagement, where I can change the users data and in the end there is a button which updates the data.

const AccountManagement = (props) => {
    const {userData} = useContext(AuthContext)
    const [name, setName] = useState(userData.name)
    //other data...
    const update = () => {
        userData.name = name
        // set other data
        updateProfile(userData)
        navigation.navigate('Profile')
    }
}

So far, so good everything works fine. But if I call the same function (update()) in an other component via props, the changed state of name for example is ignored. Below, there is the return call of the same screen AccountManagement

 return(
    <SafeAreaView style={styles.container}>
        <HeaderBar updateInfo={update}/>
        <TextInput 
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder=""/>
    <TouchableOpacity style={styles.changeContainer} 
                      onPress={update}>
        <Text style={styles.change}>Update Info</Text>
    </TouchableOpacity>
)

In the component HeaderBar, I have got a TouchableOpacity, which should do the exact thing as the TouchableOpacity in AccountManagement, call update(), which it does, but the changed name is never used when I press the TouchableOpacity in the HeaderBar component

const HeaderBar = (props) => {
  return(
    <View>
        <TouchableOpacity onPress={props.updateInfo} style={styles.rightContainer}>
            <Text style={styles.rightText}>Update Info</Text>
        </TouchableOpacity>
    </View>
  }
)

Even if I try to print with console.log I cannot see the change.

My question now is:

Why is the changed name ignored, when I press update from the HeaderBar component?

How can I fix this issue?

Thank you in advance