trouble Removing object from Flatlist

So I'm trying to add and remove objects from a Flatlist, I bring the data for it using React Navigation and getDerivedStateFromProps, when it comes to adding objects everything goes fine, but when it comes to removing it gives back the error: undefined is not an object (evaluating 'List.filter') , I use onLongPress to launch an Alert and through the alert confirm if the user wants to delete the object. The code is below:

export class ListPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      List: [],
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.route.params?.list) {
      return {
        List: [...state.List, props.route.params.list],
      };
    }
    return null;
  }

openTwoButtonAlert = () => {
    Alert.alert(
       'Delete List',
      'Are you sure to delete this list?',
      [
        {text: 'Delete', onPress: this.removeItem},

        {text: 'Cancel', 
           style: 'cancel',
           
        },
      ],
    );
  }

  removeItem = (List) => {
    let filteredItems = List.filter(item => item.key !== key);
    this.setState({ List: filteredItems })
  }

and this is the Flatlist:

<FlatList
          data={this.state.List}
          keyExtractor={(item, index) => item.key.toString()}
          renderItem={(data) => (
            <TouchableOpacity
               onLongPress={this.openTwoButtonAlert}
             />
        />

and this is what shows in the Terminal:

Array [
  Object {
    "Friday": false,
    "Monday": true,
    "Saturday": false,
    "Sunday": false,
    "Thursday": 0,
    "Tuesday": false,
    "Wednesday": false,
    "key": 0.6245429699919928,
    "Name": "",
  },
]