如何在React JS上重置组件Dropzone？

import React, { useState } from 'react';
import Dropzone from 'react-dropzone';

const MyComponent = () => {
  const [files, setFiles] = useState([]);

  const handleDrop = (acceptedFiles) => {
    setFiles(acceptedFiles);
  };

  const handleReset = () => {
    setFiles([]);
  };

  return (
    <div>
      <Dropzone onDrop={handleDrop}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>拖放文件到此处或点击选择文件</p>
          </div>
        )}
      </Dropzone>
      {files.length > 0 && (
        <div>
          <h4>已选择的文件：</h4>
          <ul>
            {files.map((file) => (
              <li key={file.name}>{file.name}</li>
            ))}
          </ul>
          <button onClick={handleReset}>重置</button>
        </div>
      )}
    </div>
  );
};

export default MyComponent;