React Native MobX FlatList extraData

Question

I cannot get my rows to re-render when my observable variable changes. I can see the console log triggering and my manageCart function is indeed working. Only problem is that the rows will not update. I have tried setting extraData on the flatlist to extraData={this.props.mainStore.productDataSource.slice()} or without . slice() but it still does not help.

manageCart(id, type) {
    let tempOne = this.props.mainStore.productDataSource.slice();
    tempOne.map((b, i) => {
        if (b.product_id === id) {
            b.qty = b.qty + 1;
        }
    });
    this.props.mainStore.productDataSource = tempOne;
}

    _renderRow = ({ item }) => {
        return (
            <ProductRow
                item={item}
                orientation={this.props.uiStore.orientation}
                manageCart={this.manageCart}
            />
        )
    }

render() {
    console.log(this.props.mainStore.productDataSource.slice())
    return (
        <View style={styles.container}>
            <StatusBarGray />
            <FixedHeader {...this.props} headerUp={this.state.headerUp} />
            <FlatList
                onScroll={this.handleScroll.bind(this)}
                scrollEventThrottle={1}
                keyExtractor={(_, i) => i}
                ListHeaderComponent={this._renderHeader}
                data={this.props.mainStore.productDataSource.slice()}
                renderItem={this._renderRow}
            />
        </View>
    );
}