help needed please! I am trying to toggle an array of item as Favovrate . it does not work and no errors

How to / Third Party Tooling
1

I want to toggle and array of item as Favorite. I have implemented the logic but it does not work any help please here is my code ,

here is the Reducer Action

import { MEALS } from "../../data/dummy-data";
const InitiateState = {
  meals: MEALS,
  FilterMeals: MEALS,
  FavoriteMeals: [],
};

import TOGGLE_FAVORITES from "../Actions/MealsActions";

const MealReducer = (state = InitiateState, action) => {
  switch (action.type) {
    case TOGGLE_FAVORITES:
      const existingState = state.FavoriteMeals.findIndex(
        (meal) => meal.id === action.mealId
      );
      if (existingState >= 0) {
        const updatedState = [...state.FavoriteMeals];
        updatedState.splice(existingState, 1);
        return { ...state, FavoriteMeals: updatedState };
      } else {
        const FindMeals = state.meals.find((meal) => meal.id === action.mealId);
        console.log(FindMeals);
        return {
          ...state,
          FavoriteMeals: state.meals,
        };
      }
    default:
      return state;
  }
};

export default MealReducer;

here is the Function

  const NewMeals = useSelector((state) => state.meals.meals);
  const SelectedMeal = NewMeals.find((meal) => meal.id === route.params.itemid);
  const test = useSelector((state) => state.meals.FavoriteMeals);

  const dispatch = useDispatch();
  const ToggleHandler = useCallback(() => {
    dispatch(ToggleFavorite(SelectedMeal.id));
    console.log(test);
  }, [dispatch, SelectedMeal.id]);

here is Fav Screen

export default function FavoriteScreen() {
  const NewMeals = useSelector(state => state.meals.FavoriteMeals);
  // const favMeals = MEALS.filter(meal => meal.id === 'm1' || meal.id === 'm2');
  console.log(NewMeals);
  return <MealList listData={NewMeals} />;
}