Свойство index не существует для типа Ingredient, angular8

Question

Я пытаюсь выучить Angular (ngrx) из учебника.

мой файл действий выглядит следующим образом:

import { Action } from '@ngrx/store';
import { Ingredient } from 'src/app/shared/ingredient.model';

export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const ADD_INGREDIENTS = 'ADD_INGREDIENTS';
export const UPDATE_INGREDIENT = 'UPDATE_INGREDIENT';
export const DELETE_INGREDIENT = 'DELETE_INGREDIENT';

interface IUpdatePayload {
    index: number;
    ingredient: Ingredient
}



export class AddIngredient implements Action {
    readonly type: string = ADD_INGREDIENT;
    constructor(public payload: Ingredient) {}
}

export class AddIngredients implements Action {
    readonly type = ADD_INGREDIENTS;

    constructor(public payload: Ingredient[]) {}
}

export class UpdateIngredient implements Action {
    readonly type = UPDATE_INGREDIENT;
    constructor(public payload: {index: number, ingredient: Ingredient}) {}
}

export class DeleteIngredient implements Action {
    readonly type = DELETE_INGREDIENT;
    constructor(public payload: number) {}
}



export type ShoppingListActions = 
AddIngredient | 
AddIngredients | 
UpdateIngredient | 
DeleteIngredient;

Файл-редуктор выглядит следующим образом

import { Ingredient } from '../../shared/ingredient.model';
import * as ShoppingListActions from './shopping-list.actions';

const initialState = {
    ingredients: [
        new Ingredient('Apples', 5),
        new Ingredient('Tomatoes', 10),
    ]
};

export function shoppingListReducer(
    state = initialState, 
    action: ShoppingListActions.ShoppingListActions
) {
    switch (action.type) {
        case ShoppingListActions.ADD_INGREDIENT:
            return { 
                ...state, 
                ingredients: [...state.ingredients, action.payload] 
            };
        case ShoppingListActions.ADD_INGREDIENTS:
            return {
                ...state,
                ingredients: [...state.ingredients, ...action.payload]
            }
        case ShoppingListActions.UPDATE_INGREDIENT:
            const ingredient = state.ingredients[action.payload.index];
            const updatedIngredient = {
                ...ingredient,
                ...action.payload.ingredient
            }
            return {
                ...state,
                ingredients: [...state.ingredients]
            };
        case ShoppingListActions.DELETE_INGREDIENT:
            return {};
        default: return state
    }
}

Я получаю ошибку в case ShoppingListActions.UPDATE_INGREDIENT: на action.payload.index , что Property 'index' does not exist on type 'Ingredient | { index: number; ingredient: Ingredient; }'. Property 'index' does not exist on type 'Ingredient'.

Не уверен, что я делаю не так. Нужна помощь. спасибо