Update Firebase Document in Functional Component with Text Inputs - firebase

Question

This is my screen that the user can visit to edit/update their details. My problem is I can't seem to get the values from the Inputs to be used as the new data when the save button is pressed. It complains about being a function. How to convert my state to a string for the function to update the firebase document?
const UserProfileEditScreen = ({ navigation }) => {
const user = auth.currentUser;
const [userData, setUserData] = useState({});
const getUser = async() => {
const currentUser = await firestore
.ref('users')
.doc(user.uid)
.get()
.then((documentSnapshot) => {
if( documentSnapshot.exists ) {
setUserData(documentSnapshot.data());
}
})
}
const [displayName, setNewDisplayName] = useState('');
const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [birthdate, setBirthdate] = useState('');
const handleUpdate = () => {
firestore.collection('users').doc(user.uid).set({
displayName: setNewDisplayName,
name: setName,
surname: setSurname,
}).then(() => {
console.log('User Updated!');
Alert.alert(
'Profile Updated!',
'Your profile has been updated successfully.'
);
});
navigation.navigate('Profile');
}
useEffect(() => {
getUser();
}, [])
return (
<DismissKeyboard>
<View style={styles.container}>
<View style={styles.insideContainer}>
<Text style={[styles.headTextH2, styles.whiteText]}>Edit Account</Text>
<View style={{marginBottom:45}}></View>
<Text style={[styles.headTextH3, styles.whiteText]}>Display Name</Text>
<TextInput
style={styles.inputStyles}
placeholder={userData.displayName}
placeholderTextColor="#000"
value={displayName}
onChangeText={setNewDisplayName}
/>
<Text style={[styles.headTextH3, styles.whiteText]}>Name</Text>
<TextInput
style={styles.inputStyles}
placeholder={userData.name}
placeholderTextColor="#000"
value={name}
onChangeText={setName}
/>
<Text style={[styles.headTextH3, styles.whiteText]}>Surname</Text>
<TextInput
style={styles.inputStyles}
placeholder={userData.surname}
placeholderTextColor="#000"
value={surname}
onChangeText={setSurname}
/>
<OGButton title="Save Changes" onPress={()=> handleUpdate()} />
</View>
</View>
</DismissKeyboard>
)
}
Error Message:

Answer 1

setName, setSurname are functions that are used to set the value of name and surname respectively and you are passing them in Firestore's set method.
const [displayName, setNewDisplayName] = useState('');
const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [birthdate, setBirthdate] = useState('');
Instead you should pass the values like this:
firestore.collection('users').doc(user.uid).set({
displayName, name, surname
})