у меня есть вот такой код 

import { create } from 'zustand';

import { IPoint } from './models/infrastucture/point';

import { Page } from './models/pages/page';

import cloneDeep from 'lodash.clonedeep';

// import cloneDeep from 'lodash.clonedeep';

// import { IPrimitive } from '../../../shared/g';



export const useZoomStore = create((set) => ({

  scale: 1,

  setScale: (scale: number) => set(() => ({ scale: scale })),

  stagePoint: { x: 0, y: 0 },

  setStagePoint: (point: IPoint) => set(() => ({ stagePoint: point })),

}));



// interface DragState {

//   node: IPrimitive | null;

//   setNode: (node: IPrimitive | null | undefined) => void;

// }

//

// export const useDragStore = create<DragState>((set) => ({

//   node: null,

//   setNode: (node: IPrimitive | null | undefined) => set(() => ({ node: node })),

// }));



interface GridStore {

  gridSize: number;

  setGridSize: (gridSize: 20 | 30 | 40) => void;

}



export const useGridStore = create<GridStore>()((set) => ({

  gridSize: 20,

  setGridSize: (gridSize: 20 | 30 | 40) => set(() => ({ gridSize: gridSize })),

}));



interface SelectionStore {

  selectedIds: Array<string | number>;

  setSelectedIds: (ids: Array<string | number>) => void;

}



export const useSelectionStore = create<SelectionStore>()((set) => ({

  selectedIds: [],

  setSelectedIds: (ids: Array<string | number>) => set(() => ({ selectedIds: ids })),

}));



// interface HistoryState {

//   history: Page[];

//   historyStep: number;

//   addToHistory: (state: Page) => void;

//   undo: () => void;

//   redo: () => void;

// }

//

// export const useHistoryStore = create<HistoryState>((set) => ({

//   history: [],

//   historyStep: -1,

//   addToHistory: (state) => {

//     set((prev) => {

//       return {

//         history: [...JSON.parse(JSON.stringify(prev.history.slice(0, prev.historyStep + 1))), state],

//         historyStep: prev.historyStep + 1,

//       };

//     });

//   },

//   undo: () => {

//     set((prev) => {

//       if (prev.historyStep > 0) {

//         return { historyStep: prev.historyStep - 1 };

//       }

//       return prev;

//     });

//   },

//   redo: () => {

//     set((prev) => {

//       if (prev.historyStep < prev.history.length - 1) {

//         return { historyStep: prev.historyStep + 1 };

//       }

//       return prev;

//     });

//   },

// }));



interface HistoryState {

  history: { [pageId: string]: Page[] };

  historyStep: { [pageId: string]: number };

  addToHistory: (pageId: string, state: Page) => void;

  undo: (pageId: string) => void;

  redo: (pageId: string) => void;

}



export const useHistoryStore = create<HistoryState>((set) => ({

  history: {},

  historyStep: {},

  addToHistory: (pageId, state) => {

    // set((prev) => {

    //       return {

    //         history: [...JSON.parse(JSON.stringify(prev.history.slice(0, prev.historyStep + 1))), state],

    //         historyStep: prev.historyStep + 1,

    //       };

    //     });



    set((prev) => {

      const currentHistory = prev.history[pageId] === undefined ? [] : prev.history[pageId];

      const currentStep = prev.historyStep[pageId] === undefined ? -1 : prev.historyStep[pageId];



      // const copyPageHistory = JSON.parse(JSON.stringify(currentHistory));

      const copyPageHistory = cloneDeep(currentHistory);

      const copyState = cloneDeep(state);



      return {

        history: {

          ...prev.history,

          [pageId]: [...copyPageHistory.slice(0, currentStep + 1), state],

        },

        historyStep: {

          ...prev.historyStep,

          [pageId]: currentStep + 1,

        },

      };

    });

  },



  undo: (pageId) => {

    set((prev) => {

      const currentStep = prev.historyStep[pageId] === undefined ? -1 : prev.historyStep[pageId];

      if (currentStep > 0) {

        return {

          historyStep: {

            ...prev.historyStep,

            [pageId]: currentStep - 1,

          },

        };

      }

      return prev;

    });

  },

  redo: (pageId) => {

    set((prev) => {

      const currentHistory = prev.history[pageId] === undefined ? [] : prev.history[pageId];

      const currentStep = prev.historyStep[pageId] === undefined ? -1 : prev.historyStep[pageId];

      if (currentStep < currentHistory.length - 1) {

        return {

          historyStep: {

            ...prev.historyStep,

            [pageId]: currentStep + 1,

          },

        };

      }

      return prev;

    });

  },

}));





но что-то идет не так при сохранении истории. почему-то первый и второй элементы остаются связанными. когда я меняю второй элемент первый тоже меняется 

дальше все идет как надо