Customize DropZoneArea for material-ui-dropzone

I would like to customize the look of the DropZoneArea besides the simple dropZoneText and Icon props. I have successfully done it, but I get the following react warning Failed prop type: Invalid prop 'dropzoneText' of type 'object' supplied to 'DropzoneAreaBase', expected string.

I understand what the issue is, but I was wondering if anyone knew how to accurately customize it.

Default looks like:

I want the following:

I was able to get it to work by overriding the the dropZoneText prop as follows:

<DropzoneArea
  filesLimit={1}
  showAlerts={false}
  classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
  showPreviewsInDropzone={false}
  showFileNames={false}
  dropzoneClass={classes.dropZone}
  Icon={''}
  dropzoneText={
    <Box className={classes.customDropZone} px={16} py={6} display="flex" flexDirection="column" justifyContent="center" alignItems="center" gridGap={4}>
      {uploading && (
        <Box className={classes.customDropZoneLoader} display="flex" flexDirection="column" justifyContent="center" alignItems="center">
          <CircularProgress size="2rem" />
        </Box>
      )}
      <Typography variant="subtitle1">Drop your file here</Typography>
      <Typography>or</Typography>
      <Box mt={1}>
        <Button color="primary" variant="outlined" style={{ width: 125 }}>
          Select File
        </Button>
      </Box>
      <Box mt={1}>
        <Typography>
          Accepted file types: <br />
          <strong>.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf</strong>
        </Typography>
      </Box>
      <Box mt={1}>
        <Typography>
          Maximum file size: <strong>20MB</strong>
        </Typography>
      </Box>
    </Box>
  }
  maxFileSize={20971520}
  acceptedFiles={[
    'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'
  ]}
  onChange={onFileDropped}
  onDropRejected={onFileRejected}
>                    
</DropzoneArea>

Does anyone know of a better way to do this and not get the warning? For what it's worth, it works perfectly fine, but just throws the warning in the console.

Unfortunately, it seems the maintainer of that repository is not capable of fixing it. https://github.com/Yuvaleros/material-ui-dropzone/issues/35 - It's a rather old repository so I doubt it would get fixed.

If you were using Typescript, you could cast the <Box> wrapper as a string to make the DropzoneArea component happy, but the issue is with the library itself not using object / ReactNode as an expected type.

If you really want to try and fix that, you could use an npm package like patch-package to fix it locally for your project. https://www.npmjs.com/package/patch-package

I have customised like the following. Hope this will help someone.
(Add this to the component where you have added DropzoneArea)

 useEffect(() => {
    const container = document.getElementsByClassName(
      'dropZone',
    ) as HTMLCollectionOf<HTMLElement>;
    if (container[0]?.children[0]) {
      container[0].children[0].innerHTML =
        "<div class='new_drop_zone_wrapper'>\n" +
        "<div class='new_drop_zone_title'>Choose file or grag it here</div>\n" +
        "<div class='new_drop_zone_description'>Supports .xls or .xlsx formats</div>\n" +
        "<div class='new_drop_zone_button_wrapper'>" +
        "<div class='new_drop_zone_button'>Add File</div>" +
        '</div>' +
        '</div>';
    }
  }, []);