reactjs - redux form and material ui framework — drag and drop file uploader

I am building a nested form framework that uses the redux form and material ui framework -- I've built the components here to date - https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

what I would like to do - is add an upload field - I've seen this example. How to enable file upload on React's Material UI simple input?

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>

but in particular something that's more like a dragdrop. -- is there something that could be built more bespoke and cleaner without having to install another module that maybe has forced styles.

https://www.npmjs.com/package/material-ui-dropzone

https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js

--- old code

http://jsfiddle.net/5rbqehz3/1/

---- using the renderDragDrop starting file here -- adapt the code so that when the user drags a file to the area -- it populates the redux form field - textarea file type with the file --- if its a case of adding multiple files to the field -- or adding fields on the fly to house each file - uploaded.

its the integration part that I need to focus on -- if its a case of hiding from view the old school fields - but having them be populated in response to the drag and drop interface.

-- latest code 17th November 2020 https://codesandbox.io/s/pensive-darwin-dpdwj

22nd November - 2020

normal

on drag - the pink box appears and the dotted line animates inward

I need help getting the styles right -- and cleaning up this code base

--- my current attempt -- https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js