Remote persistence does not work as I expected

[jericopulvera]

Why does every change I make only have 1 value and changes and does not stack even though the set function fails?

I am expecting that changes are accumulated until the set function is successful.

import { observable } from '@legendapp/state';
import { enableReactComponents } from '@legendapp/state/config/enableReactComponents';
import { persistObservable, configureObservablePersistence } from '@legendapp/state/persist';
import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage';
import { UserState, TodoState } from '@/types';

enableReactComponents();

export const globalState = observable({
  screen: 'main' as string,
  user: null as UserState | null,
  todos: [] as TodoState[],
  todolistOptions: {
    showDetails: false,
    showCompleted: false,
  } as {
    showDetails: boolean;
    showCompleted: boolean;
  },
  toggleTodo: (todoId: string) => {
    const index = globalState.todos.peek().findIndex((t: TodoState) => t.id === todoId);
    if (index !== -1) globalState.todos[index].done.set((value) => !value);
  },
  updateTodo: (todo: TodoState) => {
    const index = globalState.todos.peek().findIndex((t: TodoState) => t.id === todo.id);
    if (index !== -1) globalState.todos[index].assign(todo);
  },
});

configureObservablePersistence({
  pluginLocal: ObservablePersistLocalStorage,
});

export const { state } = persistObservable(globalState, {
  local: 'globalState',
  remote: {
    onSetError: (error) => {
      console.log(error, 'on set error');
    },
  },
  pluginRemote: {
    set: async ({ value, changes }) => {
      console.log({ value, changes });
      await fetch('https://url.to.set', {
        method: 'POST',
        body: JSON.stringify(value),
      });
    },
  },
});