Refresh to get new items in FlatList - react-native

Question

I have this app.js to render many cards from Card.js,but only 3 cards to show at a time. In app.js I have refresh button that when I pressed will hide currently show cards (3 cards) and show 3 new cards.
App.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
StatusBar,
Linking,
FlatList
} from 'react-native';
import Card from './Card'
const data = [
{key: 'Devin'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'}
]
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
itemsCount: 3,
hide: false
};
}
renderNewItem = () => {
if (this.state.itemsCount < data.length) {
this.setState((prevState) => ({ itemsCount: (prevState.itemsCount + 1) }));
}
}
renderCard = ({item}) => {
return (
<Card
text={item.key}
onPress={this.renderNewItem}
hide={this.state.hide}
/>
)
}
refreshItem = () => {
this.setState({hide: true})
if (this.state.itemsCount < data.length) {
this.setState((prevState) => ({ itemsCount: (prevState.itemsCount + 3) }));
}
}
render() {
return (
<View style={styles.container}>
<Text
style={{margin: 30, alignSelf: 'center'}}
onPress={this.refreshItem}
>
REFRESH ITEMS
</Text>
<FlatList
data={data.slice(0, this.state.itemsCount)}
keyExtractor={(item, index) => item.key}
renderItem={this.renderCard}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
text: {
textAlign: 'center',
lineHeight: 30
}
});
Card.js
import React from 'react'
import {
Text,
View
} from 'react-native'
export default class Card extends React.Component {
render () {
if (this.props.hide) {
return null
}
return (
<View style={styles.viewStyle}>
<Text onPress={this.props.onPress}>{this.props.text}</Text>
</View>
)
}
}
const styles = {
viewStyle: {
height: 100,
width: 300,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 2,
borderColor: 'black'
}
}
The problem is when I press refresh button, all cards disappear.
What I want is only currently showing cards to be disappeared and next 3 cards appear.