React Native의 목록에서 항목을 삭제하는 방법은 무엇입니까?

방금 React Native를 배우기 시작했습니다. 목록의 마지막 요소를 삭제하고 그 후에 목록이 업데이트되는 버튼이있는 간단한 앱을 만들려고합니다. 여기서 문제는 버튼을 클릭하면 전체 목록이 삭제된다는 것입니다. 누군가 나를 도와 줄 수 있습니까?

감사!

    //delete Item from the list
    class ButtonDelete extends Component{
     constructor(props){
       super(props);
        this.handleChange = this.handleChange.bind(this)
      }
      handleChange(){
     this.props.deleteItem();
  }
  render(){
    const data = this.props.data;
    return(
      <View>
        <FlatList
          data={data}
          renderItem={({item}) => <Greetings name = {item.key} ></Greetings>}
        />
        <Button
        onPress={this.handleChange}
        title="Delete"
        color="#841584"
        />
      </View>

    );
  }
}


export default class FlatListBasics extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: [
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]
    }
    this.deleteItem = this.deleteItem.bind(this);
  }

    deleteItem() {
      this.setState(prevState => ({
          data: prevState.data.pop()
      }));
      }


  render() {
    const data = this.state.data;
    return (
      <View>
        <ButtonDelete data = {data}
        deleteItem={this.deleteItem}/>
      </View>
    );
  }
}