Undefined property

import Rive, { Artboard, CanvasRenderer, RiveCanvas, StateMachineInstance } from "@rive-app/canvas-advanced";

export default class RiveRenderer {
    private canvas: HTMLCanvasElement;
    private rive!: RiveCanvas;
    private renderer!: CanvasRenderer;
    private artboard!: Artboard;
    private stateMachine!: StateMachineInstance;

    private lastTime = 0;

    constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.setup();
    }

    async setup() {
        this.rive = await Rive({
            locateFile: (_) => 'https://unpkg.com/@rive-app/[email protected]/rive.wasm'
        });

        this.renderer = this.rive.makeRenderer(this.canvas);

        const bytes = await (await fetch(new Request('sneksoldier.riv'))).arrayBuffer();
        const file = await this.rive.load(new Uint8Array(bytes));

        this.artboard = file.artboardByName('New Artboard');
        this.stateMachine = new this.rive.StateMachineInstance(
            this.artboard.stateMachineByName('State Machine 1'),
            this.artboard
        );

        this.rive.requestAnimationFrame(this.renderLoop);
    }

    renderLoop(time: number) {
        const elapsedTimeMs = time - this.lastTime;
        const elapsedTimeSec = elapsedTimeMs / 1000;
        this.lastTime = time;

        this.renderer.clear();
        this.stateMachine.advance(elapsedTimeSec);
        this.artboard.advance(elapsedTimeSec);

        this.renderer.save();
        this.renderer.align(
            this.rive.Fit.contain,
            this.rive.Alignment.center,
            {
                minX: 0,
                minY: 0,
                maxX: this.canvas.width,
                maxY: this.canvas.height
            },
            this.artboard.bounds
        );
        this.artboard.draw(this.renderer);
        this.renderer.restore();

        this.rive.requestAnimationFrame(this.renderLoop);
    }
}