如何从react-dropzone中删除文件？

import React from 'react';
import Dropzone from 'react-dropzone';

class MyComponent extends React.Component {
  state = {
    files: []
  };

  onDrop = (acceptedFiles) => {
    // 处理文件上传逻辑
    this.setState({ files: acceptedFiles });
  };

  onDelete = (index) => {
    // 删除文件
    const { files } = this.state;
    files.splice(index, 1);
    this.setState({ files });
  };

  render() {
    const { files } = this.state;

    return (
      <div>
        <Dropzone onDrop={this.onDrop}>
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()}>
              <input {...getInputProps()} />
              <p>将文件拖放到此处，或点击选择文件上传。</p>
            </div>
          )}
        </Dropzone>

        {files.length > 0 && (
          <div>
            <h4>已上传的文件：</h4>
            <ul>
              {files.map((file, index) => (
                <li key={file.name}>
                  {file.name} - {file.size} bytes
                  <button onClick={() => this.onDelete(index)}>删除</button>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    );
  }
}

export default MyComponent;