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>