Как получить доступ к input.value в форме Formik при событии onChange?

import React, {useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, useFormikContext } from 'formik';
import * as Yup from 'yup';
import FormInput from '../Inputs/FormInput';


const EditUserSchema = Yup.object().shape({
  surname: Yup.string()
      .required('Поле обязательно'),
  userName: Yup.string()
      .required('Поле обязательно'),
  patronymic: Yup.string()
      .required('Поле обязательно'),
  phone: Yup.string()
      .required('Поле обязательно'),
  email: Yup.string()
      .required('Поле обязательно')
});




<Formik
    initialValues = {{
        surname,
        userName,
        patronymic,
        phone,
        email
    }}
    validationSchema={EditUserSchema}

    onSubmit = {values => {
        alert(JSON.stringify(values, null, 2))
    }}
>
    {formik => (
        <Form id="edit-user-form"> 
            <FormInput
                label="Фамилия"
                name="surname"
                type="text" 
                formik={formik}/>

            <FormInput
                label="Имя"
                name='userName'
                type='text'/>

            <FormInput
                label="Отчество"
                name="patronymic"
                type="text" />

            <FormInput
                label="Телефон"
                name="phone"
                type="phone" />

            <FormInput
                label="Почта"
                name="email"
                type="email" 
                validate={validateEmail}/>
        </Form>
    )}
</Formik>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useEffect } from 'react';
import { ErrorMessage, useField } from 'formik';
import './formInput.scss';

const FormInput = ({label='', formik, placeholder=null, classNames='', ...props}) => {

    const [field, meta] = useField(props);
    
    return (
        <div className="form__input-wrapper">
            <label htmlFor={field.name}>{label}</label>
            <input
                className={`${classNames}`}
                {...field} {...props}
            />
            {meta.touched && meta.error ? (<div>{meta.error}</div>) : null}
            {/* <ErrorMessage component="div" name={meta.error}/> */}
        </div>
    )
    
}


export default FormInput;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>