Issue with updating an array in React Native

I am trying to work through a problem with my array state in React Native and correctly updating the array of objects when I click a button on one of the components.

Here is a video of the problem occurring, which is probably a better way to explain the issue: https://cdn.discordapp.com/attachments/935693286566416417/953045147397001276/RPReplay_Final1647294055.MP4

Here’s the relevant code that might offer some insight:

MealPlanner.Js

const MealPlannerScreen = props => {
const minDate = new Date();
const [mealPlannerData, setMealPlannerData] = useState([]);
const [loading, setLoading] = useState(true)
const [selectedDate, setSelectedDate] = useState("03/13/2022")
const [breakfast, setBreakfast] = useState([])

 const getMealPlannerData = async(date = '03/13/2022') => {
  
     const isDataAvailable = await AsyncStorage.getItem("meal_planner")

    if (isDataAvailable) {
        const parsedData = JSON.parse(isDataAvailable)
       
        let breakfastData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Breakfast'));
        });
        let lunchData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Lunch'));
        });
        let dinnerData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Dinner'));
        });
        let snacksData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Snacks'));
        });
    
        setMealPlannerData(JSON.parse(isDataAvailable))
        setBreakfast(breakfastData)
        setLunch(breakfastData)
        setDinner(dinnerData)
        setSnacks(snacksData)
        
    } else {
        setMealPlannerData([])
    }

} 




const childToParent = async(unique_id, meal, date) => {

    const mealFiltered = mealPlannerData.filter(function (e) {
        return e.unique_id != unique_id;
    });
    console.log(unique_id)
    console.log(date)

    if (meal === 'Breakfast') {
        let breakfastData = mealFiltered.filter(function (e) {
            return ((e.date = date) && (e.meal == 'Breakfast'));
        });
        console.log(breakfastData);
        setBreakfast(breakfastData)
    }
   
    
return (

    <Container style={styles.background_general}>
        <View>
                            {breakfast.map((p, i) => {
                                console.log(breakfast)
                            return (<>
                                <FoodItem meal={"Breakfast"} date={p.date} food={p.recipe_name} calories={p.calories} servings={p.servings} unique_id={p.unique_id} mealData={mealPlannerData} childToParent={childToParent}/>
                                <View style={{
                                    borderBottomColor: 'rgba(0,0,0,0.1)',
                                    borderBottomWidth: 1,
                                }}>

                                </View>
                            </>
                            )
                        })} 
                   
                    </View>
    </Container>
  
   
}

}

And the FoodItem.js

const FoodItem = props => {

removeMeal = (unique_id, meal) => {
    props.childToParent(unique_id, meal, props.date)
    
}
    
const renderRightActions = useCallback((progress, dragX) => {
    const trans = dragX.interpolate({
        inputRange: [-300, -160, 0],
        outputRange: [0, 0, 160],
    });
    return (
        <Animated.View
            style={{
                transform: [{ translateX: trans }],
            }}
        >

            <LinearGradient
                colors={["#6e269b", "#35184e"]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={{
                    flexDirection: "row",
                    width: 160,
                    height: "100%",
                    borderRadius: 20
                }}
            >
                <RectButton style={{
                    justifyContent: "center",
                    alignItems: "center",
                    paddingHorizontal: 16,
                    flex: 1
                }} onPress={() => {removeMeal(props.unique_id, props.meal) }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Icon type="FontAwesome" name="trash" style={{ fontSize: 18, color: 'white', paddingRight: 10, marginTop: 2 }} />
                        <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 18 }}>
                            Remove
                        </Text>
                    </View>
                </RectButton>
            </LinearGradient>

        </Animated.View>);
}, []);


return (
    <View style={{
        padding: 20
    }}>
        <Swipeable renderRightActions={renderRightActions}>

            <View padding-6 row>
                <View style={{ alignItems: "center" }}>
                </View>
                <View >
                    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
                        {props.food}
                    </Text>
                    <View row marginT-8>
                        <View row>
                            <Text R14 color6D marginL-4>
                                {props.calories} cal
                            </Text>
                        </View>
                        <View row marginL-24>
                            <Text R14 color6D marginL-4>
                               {props.servings} servings
                            </Text>
                        </View>
                    </View>
                </View>
            </View>

        </Swipeable>
    </View>
)

}

Any help would be greatly appreciated!