Попробуй так

const newArrayId = this.state.countId;
newArrayId.map((element) => { element.quantity + 1 });
this.setState({countId: newArrayId});

1 строка - создаёшь новый массив на основе объектов из this.state.countId
2 строка - перебираешь элементы нового массива и увеличиваешь quantity на 1
3 строка - меняешь своё состояние

Если хочешь убрать горизонтальный скролл, примени это свойство к контейнеру в котором находятся элементы

overflow-x: hidden;

В данном случае ошибка в была в кейсе reducer'a EditTodo. В reducer'е необходимо возвращаться новое состояние, а не редактировать старое. После исправлений код выглядит так:

case EDIT_TODO: {
      const index = state.todos.findIndex((todo) => todo.id == action.payload.id);
      const newTodos = [...state.todos];
      newTodos[index] = action.payload;
      return { ...state, todos: newTodos };
}

2 строка - находим индекс редактируемого элемента
3 строка - создаём новый массив на основании предыдущего состояния
4 строка - изменяем редактируемый элемент уже нового массива
5 строка - возвращаем созданное состояние