Undo, Redo and saving in Fabric.js V6 not working?

[aayushmaan-54]

import { useState, useRef, useCallback } from "react";
import { Canvas } from 'fabric';
import { AdditionalJsonSaveConfig } from "@/app/editor/types";

interface propsType {
  canvas: Canvas | null;
}

export const AdditionalJsonSaveConfig = [
  "name",
  "gradientAngle",
  "selectable",
  "hasControls",
  "linkData",
  "editable",
  "extensionType",
  "extension",
  "hoverCursor",
];

export default function useHistory({ canvas }: propsType) {
  const [historyIndex, setHistoryIndex] = useState(0);
  const canvasHistory = useRef<string[]>([]);
  const skipSave = useRef(false);

  
  const canUndo = useCallback(() => {
    return historyIndex > 0;
  }, [historyIndex]);


  const canRedo = useCallback(() => {
    return historyIndex < canvasHistory.current.length - 1;
  }, [historyIndex]);


  const save = useCallback((skip: boolean = false) => {
    if (!canvas) return;
    const currentState = canvas.toObject(AdditionalJsonSaveConfig);
    const json = JSON.stringify(currentState);

    if (!skip && !skipSave.current) {
      canvasHistory.current.push(json);
      setHistoryIndex(canvasHistory.current.length - 1);
    }
  }, [canvas]);


  const undo = useCallback(() => {
    if (canUndo()) {
      skipSave.current = true;
      canvas?.clear();
      canvas?.renderAll();

      const previousIndex = historyIndex - 1;
      const previousState = JSON.parse(canvasHistory.current[previousIndex]);

      canvas?.loadFromJSON(previousState, () => {
        canvas.renderAll();
        setHistoryIndex(previousIndex);
        skipSave.current = false;
      });
    }
  }, [canUndo, canvas, historyIndex]);


  const redo = useCallback(() => {
    if (canRedo()) {
      skipSave.current = true;
      canvas?.clear();
      canvas?.renderAll();

      const nextIndex = historyIndex + 1;
      const nextState = JSON.parse(canvasHistory.current[nextIndex]);

      canvas?.loadFromJSON(nextState, () => {
        canvas.renderAll();
        setHistoryIndex(nextIndex);
        skipSave.current = false;
      });
    }
  }, [canRedo, canvas, historyIndex]);


  return {
    save,
    canUndo,
    canRedo,
    undo,
    redo,
    setHistoryIndex,
    canvasHistory,
  };
}

why my undo & redo not working correctly, is my implementation wrong?