ReChart не отрисовывается, если передается ранний возврат для ожидания обещаний?

Question

У меня странная проблема с ReChart, который не отображает строки данных или ось X, но загружает ось Y без меток.

componentDidMount() {
    equipmentService.getOne(this.param)
        .then((item) => {
            this.setState({ item: item[0] });

            offerService.getChartMonth(this.param)
                .then((data) => {
                    this.setState({ chartOffers: data });
                })
                .catch((error) => {
                    return console.error(error);
                }); 
        })
        .catch((error) => {
            return console.error(error);
        });
}

render() {
    const item = this.state.item;

    if(item.length < 1 || this.state.chartOffers.length < 1) return (<LoadingPage />);

    return (
        <div>
            <Row>
                <Col>
                    <Chart data={this.state.chartOffers} />
                </Col>
            </Row>
        </div>
    );
}

Если я удалю эту строку:

if(item.length < 1 || this.state.chartOffers.length < 1) return (<LoadingPage />);

... тогда он отлично работает. Но я хочу дождаться завершения своих обещаний, прежде чем я их покажу.

В моем компоненте Chart у меня есть следующее:

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.data !== nextProps.data) {
        const groupByDay = _.groupBy(nextProps.data, (date) => {
            return moment.unix(date.createdAt).startOf("day").format();
        });

        const result = _.map(groupByDay, (group, day) => {
            return {
                date: day.split("T")[0],
                avgPrice: group.reduce((avg, offer) => Math.trunc(avg + offer.price / group.length), 0)
            }
        });

        this.setState({ data: result.reverse() })
    }

    return true;
}

render() {
    if(this.state.data.length < 1) return (<LoadingPage />);

    const tickFormatter = (value) => abbreviateNumber(value);
    return (
        <LineChart
            type="monotone"
            width={600}
            height={200}
            data={this.state.data}
        >
            <YAxis dataKey="avgPrice" stroke="#d8d8d8" tickFormatter={tickFormatter} />
            <XAxis dataKey="date" stroke="#d8d8d8" />
            <Tooltip content={this.customTooltip} position={{ x: "auto", y: 0 }} />
            <Line type="monotone" dataKey="avgPrice" stroke="#1967be" yAxisId={0} strokeWidth={2} />
        </LineChart>
    );
}

Странно, что даже вне оператора if я, например, помещаю console.logвнутри ничего не происходит. То же самое касаетсяcomponentDidMount и т.д. Их никогда не называют.

Это также означает, что data состояние в моем компоненте диаграммы всегда пусто и не может отображать линии.

Что происходит?