Uploading files in react by react-dropzone and formik

I have two components, first is Formik form:

<Formik
  initialValues={{files: []}}
  onSubmit={values => {
  console.log(values)}}>
    {props => (
      <form onSubmit={props.handleSubmit}>
        <UploadComponent/>
        <button type="submit"></button>
      </form>
    )}
</Formik>

Second is UploadComponent:

const UploadComponent = () => {
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })))
    }
  })
  return (
    <div>
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag and drop some files here, or click to select files</p>
      </div>
   </div>
  )

I want to get these files as values to Formik, I added some props to UploadComponent, like

value={props.values.files}
onChange={props.handleChange}
onBlur={props.handleBlur}
name='files'

I expect to get an array of uploaded files in formik. Instead I get initial value of files (empty array).
How to get these files and pass them into the formik form byreact-dropzone?

Source: ReactJs