I have weird grey lines in my animation. This is my code (copied from spine-canvas github and changed to use in React.js). Please help, my source code:

import { useEffect } from 'react';
import * as spine from '@esotericsoftware/spine-canvas';

export const HomeImage = () => {
  // canvas test place =======================================
  let lastFrameTime = Date.now() / 1000;
  let canvas: HTMLCanvasElement | null;
  let context: CanvasRenderingContext2D | null;
  let assetManager;
  let skeleton: spine.Skeleton, animationState: spine.AnimationState, bounds: any;
  let skeletonRenderer: spine.SkeletonRenderer;

  async function load() {
    canvas = document.getElementById('canvas-spine-test') as HTMLCanvasElement;
    if (!canvas) return;

    context = canvas.getContext('2d');
    if (!context) return;

    skeletonRenderer = new spine.SkeletonRenderer(context);
    skeletonRenderer.triangleRendering = true;

    // Load the assets.
    assetManager = new spine.AssetManager('/spine-test/');
    assetManager.loadBinary('spineboy-pro.skel');
    assetManager.loadTextureAtlas('spineboy.atlas');
    await assetManager.loadAll();

    // Create the texture atlas and skeleton data.
    const atlas = assetManager.require('spineboy.atlas');
    const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
    const skeletonBinary = new spine.SkeletonBinary(atlasLoader);
    const skeletonData = skeletonBinary.readSkeletonData(assetManager.require('spineboy-pro.skel'));

    // Instantiate a new skeleton based on the atlas and skeleton data.
    skeleton = new spine.Skeleton(skeletonData);
    skeleton.setToSetupPose();
    skeleton.updateWorldTransform(spine.Physics.update);
    bounds = skeleton.getBoundsRect();

    // Setup an animation state with a default mix of 0.2 seconds.
    const animationStateData = new spine.AnimationStateData(skeleton.data);
    animationStateData.defaultMix = 0.2;
    animationState = new spine.AnimationState(animationStateData);

    // Set the run animation, looping.
    animationState.setAnimation(0, 'walk', true);
    animationState.timeScale = 1;

    // Start rendering.
    requestAnimationFrame(render);
  }

  function render() {
    // Calculate the delta time between this and the last frame in seconds.
    const now = Date.now() / 1000;
    const delta = now - lastFrameTime;
    lastFrameTime = now;

    // Resize the canvas drawing buffer if the canvas CSS width and height changed
    // and clear the canvas.
    if (!canvas) return;
    if (!context) return;
    if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
    }
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Center the skeleton and resize it so it fits inside the canvas.
    skeleton.x = canvas.width / 2;
    skeleton.y = canvas.height - canvas.height * 0.1;
    const scale = (canvas.height / bounds.height) * 0.8;
    skeleton.scaleX = scale;
    skeleton.scaleY = -scale;

    // Update and apply the animation state, update the skeleton's
    // world transforms and render the skeleton.
    animationState.update(delta);
    animationState.apply(skeleton);
    skeleton.updateWorldTransform(spine.Physics.update);
    skeletonRenderer.draw(skeleton);

    requestAnimationFrame(render);
  }

  useEffect(() => {
    load();
  }, []);

  return (
    <div className="relative mx-auto flex w-full items-center justify-center">
      <canvas
        id="canvas-spine-test"
        className="h-[200px] w-[150px]"
        onClick={() => console.log('hello')}></canvas>
    </div>
  );
};