Uploading files in react by react-dropzone and formik

I have two components, first is Formik form:

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

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 {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag and drop some files here, or click to select files</p>

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


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