flatlist is not rendering all data using onreached data from api.after 3 page load not working

shows this type of error:- VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object { "contentLength": 4888.72705078125, "dt": 6945, "prevDt": 1116, }

using flatlist with class component

<FlatList
  data={data}
  initialNumToRender={20}
  renderItem={this.renderItems}
  keyExtractor={item => item.id.toString()}
  ListFooterComponent={this.renderFooter}
  onEndReachedThreshold={0}
  onEndReached={this.handelemore}
/>

render fuction

 renderItems = ({ item }) => {
        return (
            <View style={{
                flexDirection: 'row', justifyContent: 'flex-start', marginTop: 5, backgroundColor: 'white',
                shadowColor: '#999',
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.8,
                shadowRadius: 2,
                elevation: 5,
                borderRadius: 10,
            }}>
                <View style={{ justifyContent: 'flex-start', width: '30%' }}>
                    {item.main_image
                        ?
                        <Image source={{ uri: item.main_image }} style={{ height: Responsive.heightPercentageToDP(15), resizeMode: 'center' }} />
                        :
                        <Image source={require('../assets/images/image_not_found.png')} style={{ height: Responsive.heightPercentageToDP(15), resizeMode: 'center' }} />
                    }
                </View>
                <View style={{ flex: 1, flexDirection: 'row', width: '70%', alignItems: 'center' }}>
                    <View style={{ width: '85%', marginLeft: 2 }}>
                        <Text>
                            {item.product_name}
                        </Text>
                        <Text>
                            {item.price}
                        </Text>
                    </View>
                    <View style={{ width: '15%' }}>
                        <View>
                            <Icon name='chevron-forward-outline' size={25} onPress={() => this.props.navigation.navigate('NewMobileOverview', { product_id: item.id })} />
                        </View>
                    </View>
                </View>
            </View>
        )
    }

footer function

renderFooter = () => {
        return (
            <>
                {this.state.isLoadingfooter ? <View style={{ marginTop: 10, alignItems: 'center' }}>
                    <ActivityIndicator size='small' />
                </View> : null
                }
            </>
        )
    }

on reached function

 handelemore = () => {
        this.setState({ isLoadingfooter: true });
        this.getProducts()
    }

api function

 getProducts = () => {
        let requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ brand_id: this.state.brand_id, page: this.state.page })
        };
        fetch(Constant.APIURL + 'product_list', requestOptions)
            .then((response) => response.json())
            .then((json) => {
                this.setState({ data: this.state.data.concat(json.product_list) });
                this.setState({ page: this.state.page + 1 });
            })
            .catch((error) => console.error(error))
            .finally(() => {
                this.setState({ isLoading: false });
            });
    }

states

brand_id: this.props.route.params.brand_id,
            page: 1,
            isLoading: true,
            data: [],
            isLoadingfooter: false,