code in sandbox

there is an example of a scrolling mockup here. I need to make it in react js so I converted it in react js but it works at the first scroll then it is stopped on 0000.jpg

I use this link to find an example of a scrolling mockup implemented by pure Js

canvas.js

  import React, { useEffect, useRef } from "react";

const Canvas = (props) => {
  const { draw, ...rest } = props;
  const canvasRef = useRef(null);

  useEffect(() => {
    const html = document.documentElement;
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    let frameCount = 0;
    let animationFrameId;
    const currentFrame = (index) => {
      console.log("++++++++++", index);
      return `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index
        .toString()
        .padStart(4, "0")}.jpg`;
    };

    // Set canvas dimensions
    canvas.width = 1158;
    canvas.height = 770;

    // Create, load and draw the image
    const img = new Image();
    img.src = currentFrame(1); // we'll make this dynamic in the next step, for now we'll just load image 1 of our sequence
    img.onload = function () {
      context.drawImage(img, 0, 0);
    };
    const updateImage = (index) => {
      console.log("updateImage", index);
      img.src = currentFrame(index);
      context.drawImage(img, 0, 0);
    };

    window.addEventListener("scroll", () => {
      console.log("scroll");
      const scrollTop = html.scrollTop;
      const maxScrollTop = html.scrollHeight - window.innerHeight;
      const scrollFraction = scrollTop / maxScrollTop;
      const frameIndex = Math.min(
        frameCount - 1,
        Math.ceil(scrollFraction * frameCount)
      );

      requestAnimationFrame(() => updateImage(frameIndex + 1));
    });
  }, []);

  return <canvas ref={canvasRef} {...rest} />;
};

export default Canvas;

App.js

import "./styles.css";
import Canvas from "./Canvas";
export default function App() {
  return (
    <div className="App">
      <Canvas />
    </div>
  );
}