handleSubmit method in react-navigation header

[Deodes]

Using Formik library, it's great but i got in trouble, because of not understanding how to pass handle submit button inside react navigation header. Any reasoning is appreciated, I will be very grateful!

import React, { useLayoutEffect } from "react";
import {
  StyleSheet,
  ImageBackground,
  View,
  Modal,
  Text,
  TextInput,
  TouchableOpacity,
} from "react-native";
import { Formik } from 'formik';
import { getPercentageSizeHorizontal, getPercentageSizeVertical } from "src/utils/get-percentage-size";
import COLORS from 'src/constants/colors';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const initialValues = {
  avatar: '',
  firstName: '',
  lastName: '',
  email: '',
  bio: '',
  studentId: '',
}

const ProfileSettigns = ({ navigation }: any) => {
  const onPressDone = ({firstName, lastName}: any) => {
    console.log(firstName, lastName);
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity style={styles.navigation} onPress={onPressDone}>
          <Text style={styles.navigation_title}>Done</Text>
        </TouchableOpacity>
      ),
    });
  }, []);
  
  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView contentContainerStyle={styles.content} scrollEnabled={false}>
        <Formik
          initialValues={initialValues}
          onSubmit={onPressDone}
        >
        {({ handleChange, handleBlur, values }) => (
          <View style={styles.body}>
            <View style={styles.main}>
              <ImageBackground style={styles.background} source={{uri: 'https://hiphop4real.com/wp-content/uploads/2017/02/m1000x1000-2.jpg'}}>
                <View style={styles.foreground}>
                  <FontAwesome name="camera" size={22} color={COLORS.white}/>
                </View>
              </ImageBackground>
              <View style={styles.fullname}>
                <View style={styles.first_name}>
                  <TextInput 
                    placeholder="Name"
                    onChangeText={handleChange('firstName')}
                    onBlur={handleBlur('firstName')}
                    value={values.firstName}
                  />
                </View>
                <View style={styles.last_name}>
                  <TextInput 
                    placeholder="Surname"
                    onChangeText={handleChange('lastName')}
                    onBlur={handleBlur('lastName')}
                    value={values.lastName}
                  />
                </View>
                <View style={styles.email}>
                  <TextInput 
                    placeholder="Email"
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    value={values.email}
                  />
                </View>
              </View>
            </View>
          </View>
        )}
      </Formik>
      </KeyboardAwareScrollView>
    </View>
  )
}

const IMAGE_SIZE = 84;

const styles = StyleSheet.create({
  navigation: {
    paddingHorizontal: 20,
  },
  navigation_title: {
    fontSize: 17,
  },
  container: {
    flex: 1,
    backgroundColor: COLORS.white,
  },
  content: {
    flex: 1,
  },
  body: {
    flex: 1,
  },
  main: {
    height: 120,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: COLORS.green_light,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: COLORS.green_very_dark,
    borderBottomColor: COLORS.green_very_dark,
    paddingLeft: getPercentageSizeHorizontal(4),
  },
  background: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE,
    borderRadius: IMAGE_SIZE / 2,
    overflow: 'hidden',
    marginRight: getPercentageSizeHorizontal(4),
  },
  foreground: {
    flex: 1,
    backgroundColor: COLORS.black_transperent,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fullname: {
    flex: 1,
  },
  first_name: {
    flex: 1,
    borderBottomColor: COLORS.green_very_dark,
    borderBottomWidth: 1,
    justifyContent: 'center',
  },
  last_name: {
    flex: 1,
    borderBottomColor: COLORS.green_very_dark,
    borderBottomWidth: 1,
    justifyContent: 'center',
  },
  email: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default ProfileSettigns;