redux-form + react-dropzone

Подскажите как подвязать react-dropzone к redux-form. Обвернуть в компонент оказалось недостаточным. Хочу реализовать возможность закидывать файлы, удалять их. Сейчас же файл если добавлять файлы по очереди они очищаются. Не знаю нужно ли делать стейт, ведь есть редакс форма.

import React, {useMemo, useState} from 'react';
import { Box, Grid, TextField } from '@material-ui/core/';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import {useDropzone} from 'react-dropzone';

const baseStyle = {
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  padding: '20px',
  borderWidth: 2,
  borderRadius: 2,
  borderColor: '#eeeeee',
  borderStyle: 'dashed',
  backgroundColor: '#fafafa',
  color: '#bdbdbd',
  outline: 'none',
  transition: 'border .24s ease-in-out'
};

const activeStyle = {
  borderColor: '#2196f3'
};

const acceptStyle = {
  borderColor: '#00e676'
};

const rejectStyle = {
  borderColor: '#ff1744'
};

const ReduxUpload = (props) => {
  const [files, setFiles] = useState([]);
  const {
    acceptedFiles,
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject
  } = useDropzone({
 
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
    }
  });

  const style = useMemo(() => ({
    ...baseStyle,
    ...(isDragActive ? activeStyle : {}),
    ...(isDragAccept ? acceptStyle : {}),
    ...(isDragReject ? rejectStyle : {})
  }), [
    isDragActive,
    isDragReject,
    isDragAccept
  ]);

  return (
    <div className="container">
      <div {...getRootProps({style})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>
          {
            files.map(file => (
              <li key={file.path}>
                {file.path} - {file.size} bytes
                <button>Delete</button>
              </li>
            ))
          }
        </ul>
      </aside>
    </div>
  );
}

const renderTextField = ({
  label,
  input,
  meta: { touched, invalid, error },
  ...custom
}) => (
  <TextField
    label={label}
    placeholder={label}
    error={touched && invalid}
    helperText={touched && error}
    {...input}
    {...custom}
  />
)


const Upload = () => {
  return (
    <div>
      <Field
        name="firstName"
        component={renderTextField}
        label="First Name"
      />
      <Field
        name="uploader"
        component={ReduxUpload}
      />
    </div>
    
  );
};

export default compose(
  reduxForm({
    form: 'example',
    initialValues: {
      firstName: 'files'
    }
  }),
)(Upload);