Перетаскивание файлов, предварительный просмотр файлов с помощью React Dropzone. без перезаписи существующих превью

Question

Я скопировал следующий код из Code-sandbox. Он работает нормально в Code-sandbox, но когда я запускаю его на своем локальном хосте, он выдает ошибку «дети, а не функция». Я импортировал все необходимые библиотеки. Я попытался запустить страницу в Mozilla, то же самое было и в случае там. Ниже приведен следующий фрагмент кода

constructor(props) {
    super(props);

    this.state = {
      files: [],
    };
  }



  onPreviewDrop = (files) => {
    this.setState({
      files: this.state.files.concat(files),
    });
  }

  render() {
    const previewStyle = {
      display: 'inline',
      width: 100,
      height: 100,
    };

    return (
      <div className="app">
            <h1>react-dropzone Demo</h1>



            <h2>Image Previews</h2>
            <Dropzone
                accept="image/*"
                onDrop={this.onPreviewDrop}
            >
                Drop an image, get a preview!
            </Dropzone>
            {this.state.files.length > 0 &&
            <Fragment>
                <h3>Previews</h3>
                {this.state.files.map((file) => (
                <img
                alt="Preview"
                key={file.preview}
                src={file.preview}
                style={previewStyle}
                />
                ))}
            </Fragment>
            }

        </div>
    );
  }
}