React Native. Почему при первом клике на элемент он не удаляется?

export default function Example() {
 
  const [allGoals, setAllGoals] = useState([])
 
  function deleteGoal(id) {
    setAllGoals(allGoals.filter(g => g.id != id))
  }
 
  function addGoalHandler(enteredGoalText) {
    setAllGoals([...allGoals, { text: enteredGoalText, id: Math.random().toString() }])
  }
 
  return (
    <View style={styles.appContainer}>
      <GoalInput onAddGoal={addGoalHandler}/>
      <View style={styles.goalsContainer}>
        <FlatList
          alwaysBounceVertical={true}
          data = {allGoals}
          renderItem ={({ item, index }) => {
            return (<GoalItem item={item} deleteGoal={deleteGoal.bind(this, item.id)}/>)
          }}
          keyExtractor={i => i.id}
        />
      </View>
    </View>
  );
}
 
export default function GoalItem ({ item, deleteGoal }) {
  return (
    <Pressable onPress={() => {
      deleteGoal(item.id);
    }}>
      <View style = {styles.singleGoal}><Text style = {styles.singleGoalText} >{item.text}</Text></View>
    </Pressable>
  )
}
 
export default function GoalInput({onAddGoal}) {
  const [enteredGoalText, setEnteredGoalText] = useState('');
  function goalInputHandler(enteredText) {
    setEnteredGoalText(enteredText);
  }
 
  function addGoalHandler() {
    onAddGoal(enteredGoalText)
    setEnteredGoalText('')
  }
  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.textInput}
        placeholder="Your course goal!"
        onChangeText={goalInputHandler}
        value={enteredGoalText}
      />
      <Button title="Add Goal" onPress={addGoalHandler}/>
    </View>
  )
}