file merge using react in material ui

Question

• I am new to react code.
• I am trying to do file merge in react.
• so I took two input tags for file upload.
• I thought on change of the input tag event I will catch the file data nd merge the documents.
• but the problem is right now now I am getting an error when I upload dcoument.
• can you guys tell me how to do file merge using react.
• it would be great if you let me know so that in future I will fix it myself.
• providing my codesnippet and sandbox code below.

https://codesandbox.io/s/qxplyq2lqw

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    margin: theme.spacing.unit
  },
  input: {
    display: "none"
  }
});

// handleChange(e) {
//   console.log('handle change called')
// }

function OutlinedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <input
        accept="image/*"
        className={classes.input}
        id="outlined-button-file"
        multiple
        type="file"
      />
      <label htmlFor="outlined-button-file">
        <Button variant="outlined" component="span" className={classes.button}>
          Upload
        </Button>
      </label>

      <label for="avatar">Choose a file one</label>

      <input
        type="file"
        id="avatar"
        name="avatar"
        onChange={e => {
          this.handleChange(e);
        }}
      />

      <label for="avatar">Choose a file two:</label>

      <input type="file" id="avatar" name="avatar" />
    </div>
  );
}

OutlinedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedButtons);