title: How to remove file from react-dropzone?
body: <p>Hope you help me with this, I'm using the useDropzone hook from <a href="https://react-dropzone.js.org/" rel="noreferrer">react-dropzone</a> and I don't know how to make a remove file button for each file. </p>
  
  <p>How can I remove a single file? </p>
  
  <p>This is my code: </p>
  
  <pre><code>function DragFile(props) {
    const { acceptedFiles, rejectedFiles, getRootProps, getInputProps } = useDropzone({
      accept: 'image/jpeg, image/png, .pdf',
      maxSize: 3000000,
      multiple: true
    });
  
    const acceptedFilesItems = acceptedFiles.map(file =&gt; (
      &lt;Col xs={12} md={4} key={file.path} className="card-file"&gt;
        &lt;div className="file-extension"&gt;{file.path.substring(file.path.indexOf('.') + 1)}&lt;/div&gt;
        &lt;span&gt;{file.path.substring(0, file.path.indexOf('.'))} &lt;small&gt;{(file.size / 1000).toFixed(2)} Kb&lt;/small&gt;&lt;/span&gt;
        &lt;button className="delete"&gt;DeleteButton&lt;/button&gt;
      &lt;/Col&gt;
    ));
  
    const rejectedFilesItems = rejectedFiles.map(file =&gt; (
      &lt;li key={file.path}&gt;
        {file.path.substring(0, file.path.indexOf('.'))} - {file.size / 1000} Kb
      &lt;/li&gt;
    ));
  
    return (
      &lt;div&gt;
        &lt;div {...getRootProps({ className: 'dropzone drag-n-drop' })}&gt;
          &lt;input id="file-claim" {...getInputProps()} /&gt;
          &lt;img src={uploadSrc} alt="Subir archivo" /&gt;
          &lt;p&gt;Drag files here (PDF, JPG, PNG).&lt;/p&gt;
        &lt;/div&gt;
        &lt;Row className="accepted-files"&gt;
          {acceptedFilesItems}
        &lt;/Row&gt;
      &lt;/div&gt;
    );
  }
  
  export default DragFile;
  </code></pre>