Компонент React не реагирует на наблюдаемые данные mobx

Я использую mobX для моего собственного проекта React. Обратите внимание на этот класс магазина:

class Birds {
    @observable listOne = [];
    @observable fetchingListOne = false;
    @observable fetchErrorOne = '';

    @action setListOne = () => {
        this.fetchingListOne = true;
        api.getList()
            .then((data) => {
                this.listOne.replace(data);
                this.fetchingListOne = false;
            })
            .catch((error) => {
                this.fetchingListOne = false;
                this.fetchErrorOne = error;
            });
    };
}

И это компонент реакции:

@inject('BirdStore') @observer
export default class Flat extends React.Component {
    componentDidMount() {
        this.props.BirdStore.setListOne();
    }

    _renderHeader = () => {
        return <Text style={styles.listHeaderText}>
            Hello {this.props.BirdStore.listOne.length} is {this.props.BirdStore.fetchingListOne.toString()}
            </Text>;
    };

    _renderItem = ({item}) => {
        return <Text style={styles.item}>{item.name}</Text>
    };

    _renderFooter = () => {
        if (this.props.BirdStore.fetchingListOne) {
            return <ActivityIndicator/>
        }
        else {
            return null
        }
    };

    render() {
        const dataSource = this.props.BirdStore.listOne.slice();

        return (
                <View style={styles.container}>
                    <Text>Fetching: {this.props.BirdStore.fetchingListOne.toString()}</Text>
                    <FlatList
                        style={styles.listContainer}
                        ListHeaderComponent={this._renderHeader}
                        data={dataSource}
                        renderItem={this._renderItem}
                        keyExtractor={(item, i) => item.id}
                        ListFooterComponent={this._renderFooter}
                    />
                </View>
        )
    }
}

Сверху мне кажется, что:

1. Когда компонент Flat монтируется, он вызывает метод хранилища setListOne().
2. setListOne() устанавливает для fetchingListOne значение true и выполняет вызов API.
3. На стороне компонента, когда fetchingListOne имеет значение true, отображается ActivityIndicator, а в ListHeaderComponent должно отображаться значение true.
4. На стороне магазина после успешного / неудачного ответа он устанавливает fetchingListOne в значение false.
5. Наконец, на стороне компонента, поскольку для fetchingListOne установлено значение false, ActivityIndicator не должен отображаться, а в ListHeaderComponent должен отображаться false.

Однако это не то, что происходит. Здесь, когда вызывается метод setListOne(), после того, как он устанавливает для fetchingListOne значение true, компонент не реагирует на изменения, сделанные после вызова api. И ActivityIndicator продолжает отображаться, а в ListHeaderComponent его отображение истинно.

Что я здесь делаю не так? Не могли бы вы мне помочь. Спасибо

Обновить

Я добавил текстовый компонент перед FlatList. Добавление компонента Text или ведения журнала консоли внутри метода рендеринга класса компонента заставляет FlatList реагировать на изменения. Но я не знаю, почему это происходит.