React Context API - компонент рендеринга при изменении контекста без переноса рендера в потребителя

Question

Я использую this.context для получения данных контекста внутри методов жизненного цикла, но когда я не оборачиваю компонент с помощью Consumer, то при изменении данных контекста мой компонент не перерисовывается.

Итак, вместо этого:

render() {
        console.log('companies render');
        const { modal, singleCompanyData, loading } = this.state;
        const { itemsPerPage } = this.props;
        const columns = [
            { key: 'id', title: 'ID' },
            { key: 'title', title: 'Title' },
            { key: 'city', title: 'City' },
            { key: 'btn', title: 'Action' }
        ];
        return (
            <SharedDataConsumer>
                {({ companies }) => (
                    <React.Fragment>
                        <Companies
                            columns={columns}
                            data={companies}
                            addCompany={this.addCompany}
                            totalRecords={companies.length}
                            loading={loading}
                            itemsPerPage={itemsPerPage}
                        />
                        <AM2Modal open={modal} handleModalClose={this.handleModalClose}>
                            <CompaniesEdit
                                singleCompanyData={singleCompanyData}
                                handleModalClose={this.handleModalClose}
                                inputChangeEvent={this.inputChangeEvent}
                            />
                        </AM2Modal>
                    </React.Fragment>
                )}
            </SharedDataConsumer>
        );
    } 

Мне нужно использовать что-то вроде этого, чтобы отформатировать эти данные перед рендерингом:

render() {
        console.log('companies render');
        const { modal, singleCompanyData, loading } = this.state;
        const { companies } = this.context;
        const { itemsPerPage } = this.props;
        const newComp = companies.map(value => ({
           ...value,
           btn: this.actionBtns(value.id)
        }));
        const columns = [
            { key: 'id', title: 'ID' },
            { key: 'title', title: 'Title' },
            { key: 'city', title: 'City' },
            { key: 'btn', title: 'Action' }
        ];
        return (
            <React.Fragment>
                <Companies
                    columns={columns}
                    data={newComp}
                    addCompany={this.addCompany}
                    totalRecords={companies.length}
                    loading={loading}
                    itemsPerPage={itemsPerPage}
                />
                <AM2Modal open={modal} handleModalClose={this.handleModalClose}>
                    <CompaniesEdit
                        singleCompanyData={singleCompanyData}
                        handleModalClose={this.handleModalClose}
                        inputChangeEvent={this.inputChangeEvent}
                    />
                </AM2Modal>
            </React.Fragment>
        );
    }

Но в этом случае компонент не обновляется после изменения контекста - данные контекста асинхронны.

Я провел исследование и увидел этот пример, где они оборачивают экспорт и передают данные контекста как реквизиты, но не уверен, что это правильный путь с последним API контекста?

Полный код здесь.