Как сделать анимацию прорисовки линии в fabric 6?

Question

[TimPulin]

Привет.
Проект на Next (мало ли важно).
Не могу понять, почему не работает анимация прорисовки линии в fabric 6.
Логи в консоль выводит, то есть расчет анимации происходит. Но на экране сначала пустой canvas, а через 1с (время продолжительности анимации) появляется вся линия целиком. То есть, у меня предположение, что в методе onChange не отрабатывает canvas.renderAll()
Подскажите, пожалуйста, что не учел, где написал неправильно.
функция анимации:

export function animateLineDraw(
  canvas: Canvas,
  line: Line,
  duration: number = 1000
) {
  const lineLength = Math.sqrt(
    Math.pow(line.x1! - line.x2!, 2) + Math.pow(line.y1! - line.y2!, 2)
  );

  line.set({
    strokeDashArray: [lineLength, lineLength],
    strokeDashOffset: lineLength,
  });

  line.animate(
    { strokeDashOffset: 0 },
    {
      duration,
      easing: util.ease.easeInOutQuad,
      onChange: () => {
        console.log('onchange, strokeDashOffset:', line.strokeDashOffset);
        canvas.renderAll();
      },

      onComplete: () => {
        console.log('oncomplete');

        line.set({
          strokeDashArray: undefined,
          strokeDashOffset: 0,
        });
        canvas.renderAll();
      },
    }
  );
}

Для полноты картины.
Так инициализирую canvas

function initFabricCanvas(
    canvasHtml: HTMLCanvasElement,
    width: number,
    height: number
  ) {
    fabricCanvasRef.current?.dispose();

    const canvas = new Canvas(canvasHtml, {
      width,
      height,
      backgroundColor: '#eaeaea',
    });

    BaseFabricObject.ownDefaults.originX = 'center';
    BaseFabricObject.ownDefaults.originY = 'center';
    fabricCanvasRef.current = canvas;
  }

А это функция непосредственно отрисовки

function renderFabricCanvas() {
    if (!fabricCanvasRef.current) return;
    const line = createLine([300, 150, 400, 150]);
    fabricCanvasRef.current.add(line);

    animateLineDraw(fabricCanvasRef.current, line);
    fabricCanvasRef.current.renderAll();
  }