在使用react-dropzone时，如何在一个页面上有多个dropzone来预览多个图像？

npm install react-dropzone

import {useDropzone} from 'react-dropzone';

const dropzones = [
  {id: 1, name: 'Dropzone 1'},
  {id: 2, name: 'Dropzone 2'},
  {id: 3, name: 'Dropzone 3'}
];

const MyComponent = () => {
  return (
    <div>
      {dropzones.map(dropzone => (
        <Dropzone key={dropzone.id} name={dropzone.name} />
      ))}
    </div>
  );
};

const Dropzone = ({name}) => {
  const [files, setFiles] = useState([]);

  const onDrop = useCallback(acceptedFiles => {
    setFiles(acceptedFiles);
  }, []);

  return (
    <div>
      <h2>{name}</h2>
      <div>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>拖放文件到此处，或点击选择文件</p>
        </div>
      </div>
      <div>
        {files.map(file => (
          <img key={file.name} src={URL.createObjectURL(file)} alt={file.name} />
        ))}
      </div>
    </div>
  );
};