Почему компонент ant.design <Upload>отменяет запрос на загрузку при setState?

Question

1. У меня есть форма с компонентом загрузки с использованием ant.design
2. Но каждый раз, когда я загружаю изображение, запрос отменяется.
3. Я выясняю вызов метода setState()в обработчике onChange произошел сбой.
4. Код был скопирован с примера на сайте ant.design: https://ant.design/components/upload-cn/#components-upload-demo-avatar
5. Я не знаю, что здесь не так, я слишком много потратилвремя на это ...
6. это мой код, вы можете примерить https://codesandbox.io/s/wopv2xn1k5

`` `

import React from 'react';
import ReactDOM from 'react-dom';

import { Upload, Form, Icon } from 'antd';

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

class AddBookForm extends React.Component {
    state = {
        loading: false,
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    }

    render() {
        const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
        const FormItem = function(props) {
            return <Form.Item {...formItemLayout} {...props}></Form.Item>;
        };
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const imageUrl = this.state.imageUrl;

        return (
            <Form layout="horizontal">
                <FormItem label="图片" extra="请上传2M以内的JPG图片">
                        <Upload
                            name='imageFile'
                            action="/api/image-upload"
                            onChange={this.handleChange}
                            showUploadList={false}
                            listType="picture-card"
                            className="single-image-uploader"
                        >
                            {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
                        </Upload>
                </FormItem>
            </Form>
        );
    }
}

ReactDOM.render((
    <AddBookForm />
), document.getElementById('root'));

ОБНОВЛЕНИЕ 2018-05-25:

Эта проблема решается после изменения компонента <FormItem> с функционального компонента без состояния на компонент класса.

class FormItem extends React.Component {
    render() {
        const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
        return <Form.Item {...formItemLayout} {...this.props}></Form.Item>
    }
}