delete list element using filter method

I am working on todo list in native , i have a function called onDelete but when i click on it , it delete all element in list and after then program crashed.
this is my main file where i have stored value as key , value pair

export default function App() {
  const [courseGoal, setCourseGoal] = useState([]);
  const [count, setCount] = useState('');

  const submitHandler = () => {
    setCourseGoal((currGoal) => [
      ...currGoal,  
      { key: Math.random().toString(), value: count },
    ]);
  };
  console.log('App', courseGoal)
  return (
    <View style={styles.container}>
      <SearchBar
        setCourseGoal={setCourseGoal}
        count={count}
        setCount={setCount}
        submitHandler={submitHandler}
      />
      <ListItem courseGoal={courseGoal} setCourseGoal={setCourseGoal} courseGoal={courseGoal}/>
    </View>
  );
}

this is my list component where i am facing issue, you can see ondelete here.

import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
import { FlatList } from "react-native-web";

export default function ListItem(props) {
  const onDelete = (goalId) => {
    props.setCourseGoal((currGoal) => {
      currGoal.filter((goal) => goal.key !== goalId);
      console.log("clicked", props.courseGoal[0].key);
    });
   
  };

  return (
    <FlatList
      data={props.courseGoal}
      keyExtractor={(item, index) => item.key}
      renderItem={(itemData) => (
        <TouchableOpacity
          onPress={onDelete.bind(itemData.item.key)}
          activeOpacity={0.2}
        >
          <Text style={styles.listData}>{itemData.item.value}</Text>
          {console.log(itemData.item.key)}
        </TouchableOpacity>
      )}
    />
  );
}

this is my main component where i have my search input

import React from "react";
import { View, Text, StyleSheet, Pressable, TextInput } from "react-native";

export default function SearchBar(props) {
  const onInputHandler = (value) => {
    props.setCount(value);
  };

  return (
    <View style={styles.searchBox}>
      <Pressable style={styles.submitBtn} title="Click Me !">
        <Text>☀️</Text>
      </Pressable>
      <TextInput
        style={styles.searchInput}
        placeholder="Enter Goal"
        onChangeText={onInputHandler}
      />
      <Pressable
        style={styles.submitBtn}
        title="Click Me !"
        onPress={props.submitHandler}
      >
        <Text>🔥🔥</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  searchBox: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  searchInput: {
    width: "90%",
    textAlign: "center",
    padding: 10,
    // color: 'white',
    borderRadius: 10,
    borderWidth: 1,
    marginHorizontal: 5,
  },
  submitBtn: {
    color: "black",
    justifyContent: "space-around",
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
  },
});

>Solution :

You have to return the filtered array from your onDelete function

const onDelete = (goalId) => {
    props.setCourseGoal((currGoal) => {
        return currGoal.filter((goal) => goal.key !== goalId);
    });
};