How can I apply a snapshot with a different type?

I am using different types of "Todo" models in my app. The types are implemented via a field called "type".

const BaseTodo = types
  .model("BaseTodo", {
    id: types.optional(types.number, () => Math.random()),
    title: types.string,
    finished: false,
    type: types.string
  })
  .actions(self => ({
    toggle() {
      self.finished = !self.finished;
    },
    changeToShoppingType() {
      const snap = getSnapshot(self);
      console.log("snapshot: ", snap);
      const newSnap = {};
      Object.assign(newSnap, snap, { type: "shopping" });

      console.log("newSnap: ", newSnap);
      applySnapshot(self, newSnap);
      console.log("after apply snap: ", self);
    }
  }));

const ShoppingTodo = BaseTodo.named("ShoppingTodo").props({
  type: types.literal("shopping")
});

const CleaningTodo = BaseTodo.named("CleaningTodo").props({
  type: types.literal("cleaning")
});

export const Todo = types.union(ShoppingTodo, CleaningTodo);

export const TodoStore = types
  .model("TodoStore", {
    todos: types.array(Todo)
  });

My problem: When I want to change my step type from 'cleaning' to 'shopping' by applying a snapshot to my object, I am getting the error:

... at path "/type" value "shopping" is not assignable to type: "cleaning"

Any hint how to implement my usecase?

I created a codesandbox example of how I want to change the type (just click the button): https://dm71z.csb.app/

Unfortunatelly I can't get the error to show up in the console.

from How can I apply a snapshot with a different type?