renderLoadEarlier does not work correctly

Question

Customize renderLoadEarlier does not work correctly.

I have this code:

LoadMoreButton class:

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const styles = {
    containerStyle: {
        marginTop: 8,
        marginBottom: 8,
        paddingTop: -2,
        alignItems: 'center',
        justifyContent: 'center',
    },

    textStyle: {
        size: 30,
        color: '#D60000',
    }
}

export default class LoadMoreButton extends React.Component {

    static defaultProps = {
    }

    static propTypes = {
        onPress: PropTypes.func.isRequired,
    }

    renderLoading() {
        if (!this.props.isLoadingEarlier) {
            return <FontAwesome name='angle-double-up' size={styles.textStyle.size} color={styles.textStyle.color}/>
        } else {
            return <FontAwesome name='spinner' size={styles.textStyle.size} color={styles.textStyle.color}/>
        }
    }

    render() {
        console.log('LoadMoreButton => render', this.props.isLoadingEarlier);
        return (
            <View style = {{
                width: '100%',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <TouchableOpacity
                    onPress={() => {
                        if (this.props.onLoadEarlier) {
                            this.props.onLoadEarlier()
                        }
                    }}
                    disabled={this.props.isLoadingEarlier === true}
                    accessibilityTraits='button'
                >
                    <View style = {styles.containerStyle}>
                        {this.renderLoading()}
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

In Chat module, I have

renderLoadEarlier = (loadEarlierProps) => {
        console.log('renderLoadEarlier', loadEarlierProps.isLoadingEarlier);
        return <LoadMoreButton 
            onLoadEarlier={loadEarlierProps.onLoadEarlier} 
            isLoadingEarlier={loadEarlierProps.isLoadingEarlier} />
    }

    onLoadEarlier = async () => {
        this.setState({
            isLoadingEarlier: true,
        });
        try {
            console.log('onLoadEarlier => loadd more');
            await this.loadEarlierMessage();
            console.log('onLoadEarlier => loadd more done');
        } catch ( error ) {
            Alert.alert('Error!', 'Can not load more message.');
        } finally {
            console.log('onLoadEarlier => loadd more state');
            this.setState({
                isLoadingEarlier: false,
            });
        }
    }


render() {
return (
                <GiftedChat
                    messages={this.state.messages}
                    onSend={this.onSend}

                    renderLoadEarlier = {this.renderLoadEarlier}
                    loadEarlier={true}
                    isLoadingEarlier={this.state.isLoadingEarlier}
                    onLoadEarlier={this.onLoadEarlier}

                    user={{
                        _id: this.props.userId,
                        name: this.props.name,
                        avatar: AuthSv.buildAvatarURL(this.props.fbId)
                    }}

                    renderBubble={this.renderBubble}

                    placeholder="Type your message ..."
                />
            );
...
}

I expect the output of console log has to contain this line at the end if I press the load more button:

LoadMoreButton => render true

right after this line:

Chat => render false

But the actual output does not contain it, just:

onLoadEarlier => loadd more
Chat.js:131
Chat => render true
Chat.js:193
Chat => render true
Chat.js:193
renderLoadEarlier true
Chat.js:120
LoadMoreButton => render true
LoadMoreButton.js:39
renderLoadEarlier true
Chat.js:120
LoadMoreButton => render true
LoadMoreButton.js:39
onLoadEarlier => loadd more done
Chat.js:133
onLoadEarlier => loadd more state
Chat.js:137
Chat => render false
===> missing re-render here <===

Everything work perfectly, except at last step the renderLoadEarlier has not been called after this.state.isLoadingEarlier changed from true to false.

Someone know why ?