I'm currently learning useReducer and try to convert useState to useReducer in todo app. My problem :

1. TOGGLE_TODO can't update the value when click.

case TOGGLE_TODO:
   let targetId = todoItem[action.index];
   let newTodo = [...todoItem];
   return (newTodo[targetId].completed = !newTodo[targetId].completed);

<button
    value={index}
    onClick={(event) =>
       dispatch({
          type: TOGGLE_TODO,
          index: event.target.value,
       })
    }
 >
    {todo.completed ? "done" : "pending"}
 </button>

2. UPDATE_TODO, I have no clue for convert this to useReducer. Can I convert this too ? Here is my code using useState.

const onUpdate = (e) => {
   const target = e.currentTarget.value;
   const todoTarget = todoItem[target].name;
   setInput(todoTarget);
   setTodoIndex(target);
};

And here is my codesandbox for full code. using useState and using useReducer