Add and Remove items from state array with React Native Checkbox

Question

I am trying to add and remove items from a state array using React Hooks and React Native Checkboxes. I am able to add the value of the checkbox to the array when checked, but I am unable to remove the value from the array at all, let alone when the checkbox is un checked. I have tried many different filter solutions, and do not want to use splice to avoid mutation. For now I am trying to use a separate button to delete the value from the array. Here is an expo snack https://snack.expo.dev/jN_QvE7pb

import React, {useState, useEffect, useRef} from 'react';
import {Text, View, StyleSheet, FlatList, Button, Modal, CheckBox} from 'react-native';
// import CheckBox from '@react-native-community/checkbox';
import {Card} from 'react-native-paper';

const data = [
  {id: 1, txt: 'item1', isChecked: false},
  {id: 2, txt: 'item2', isChecked: false},
  {id: 3, txt: 'item3', isChecked: false},
  {id: 4, txt: 'item4', isChecked: false},
];

const Example = () => {
  const [products, setProducts] = useState(data);
  const [arr, setArr] = useState([]);

  useEffect(() => {
    console.log(arr);
  }, [arr]);


  const addToArray = id => {
    console.log(id);
    products.map(product => {
      if (id === product.id) {
        setArr(prev => [...prev, product.id]);
      }
    });
  };

  const removeFromArray = id => {
    setArr(arr.filter((e, i) => e.id !== id));
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        renderItem={({item}) => (
          <Card style={{margin: 5}}>
            <View style={styles.card}>
              <View
                style={{
                  flexDirection: 'row',
                  flex: 1,
                  justifyContent: 'space-between',
                }}>
                <CheckBox
                  value={item.isChecked}
                  onChange={() => {
                    addToArray(item.id);
                  }}
                />
                <Button
                  onPress={() => {
                    removeFromArray(item.id);
                  }}
                  title="Remove From Array"
                />
                <Text>{item.txt}</Text>
              </View>
            </View>
          </Card>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,

    justifyContent: 'center',

    backgroundColor: '#ecf0f1',

    padding: 8,
  },

  card: {
    padding: 10,

    margin: 5,

    flexDirection: 'row',

    justifyContent: 'space-between',
  },

  modalView: {
    margin: 20,

    backgroundColor: 'white',

    borderRadius: 20,

    padding: 5,

    justifyContent: 'space-between',

    alignItems: 'center',

    elevation: 5,
  },

  text: {
    textAlign: 'center',

    fontWeight: 'bold',
  },
});

export default Example;