Updating informations from modal-React native

On my react native app I display information that I fetched from the server this way:

So when I click update profil, I display a modal with text input on it in order to give the user the opportunity to change the information of his profile. The modal look like this:

Now I already created a Fetch Post function that, when I click on the button update it sends static information to the server and the modal closes. but the profile page doesn't refresh until I get out of it and come back.

My question is: whats the best way to get the values from the textinputs, send them through post. and refresh the screen after the modal closes?. Should i use formik?

Here is a look at my code:

export default function MprofilScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    const [Data, setData] = useState([]);
    useEffect(() => {

        fetch('******')
            .then((response) => response.json())
            .then((res) => {
                console.log("repooooonse")
                console.log(res)
                setData(res)
            })
            .done();
    }, []);
    return (
        <View style={{ flex: 1, backgroundColor: 'white' }} >
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                }}>
                <View style={styles.modalView}>


                    <TouchableOpacity
                        style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                        onPress={() => {
                            setModalVisible(!modalVisible);
                        }}
                    >
                        <Text style={styles.textStyle}>close</Text>
                    </TouchableOpacity>
                    <ScrollView>
                        <Text style={styles.text}>Nom:</Text>
                        <TextInput style={styles.text_input} placeholder="nom" />
                        ....
                        <Text style={styles.text}>Ville :</Text>
                        <TextInput style={styles.text_input} placeholder="Ville " />
                        <TouchableOpacity
                            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                            onPress={() => {
                                setModalVisible(!modalVisible);
                            }}
                        >
                            <Text style={styles.textStyle}>Delete</Text>
                        </TouchableOpacity>
                    </ScrollView>
                </View>

            </Modal>
            <TouchableOpacity style={styles.btn}
                onPress={() => {
                    setModalVisible(true);
                }}>
                <Text style={{ color: 'white', fontSize: 15 }}> Update profil</Text>
            </TouchableOpacity>
            <View >


<View style={styles.main_container}>
    <Text style={styles.text}>Nom:</Text>
    <Text style={styles.text1}>{Data.nom}</Text>

</View>
.....
<View style={styles.main_container}>
    <Text style={styles.text}>Ville:</Text>
    <Text style={styles.text1}> {Data.ville}</Text>

</View>


</View>

        </View>
    );
}

I'm new to react native and I'll appreciate your help!