Why is Rive animation frozen on html?

Question

I am new to Rive but I have created some animations and I am trying to include it in my HTML project, however, it seems to be frozen.

It works when I use their default riv from the cdn that is.

const r = new rive.Rive({
  src: "https://cdn.rive.app/animations/vehicles.riv",
  // Or the path to a public Rive asset
  // src: '/public/example.riv',
  canvas: document.getElementById("canvas"),
  autoplay: true,
  stateMachines: "bumpy",
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();
  },
});

But as soon as I point it to my local rive, it is frozen.

const r = new rive.Rive({
  src: "./assets/rive/door.riv",
  // Or the path to a public Rive asset
  // src: '/public/example.riv',
  canvas: document.getElementById("canvas"),
  autoplay: true,
  stateMachines: "bumpy",
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();
  },
});

I also looked at their examples and they have a sandbox example, which seems to have the same problem as well when I point to the basketball rive, it is frozen. Link to the code sandbox.

How do I make these work, I am very confused, any help is appreciated.