Howler sound getting stuck in queue

Question

I have a Howl wherein I trigger the play() method on button click, but the sound still doesn't play. If I log the Howl instance to the console on button click, I san see that the play events are queued up in the object's queue prperty, and the state is "loading".

I tried looking through this thread but had no luck. I've also moved the assets around from src to public, tried different file formats, different priorities of formats etc.

Here's my code so far:

import React from "react";
import { Howl } from "howler";

export default function Sounds() {
  const soundEffects = new Howl({
    src: ["effects.webm", "effects.mp3"],
    sprite: {
      loop: [0, 60.013492063492066],
      deepSounds: [62, 266.4691383219955],
      screwdriver: [268, 293.9140589569161],
    },
  });

  const handleLoopPlay = () => {
    console.log(soundEffects);
    soundEffects.play("loop");
  };

  return (
    <div>
      <button onClick={handleLoopPlay}>Play loop</button>
    </div>
  );
}

The sprite looks like this:

{
  "resources": [
    "effects.webm",
    "effects.mp3"
  ],
  "spritemap": {
    "loop": {
      "start": 0,
      "end": 60.013492063492066,
      "loop": false
    },
    "deepSounds": {
      "start": 62,
      "end": 266.4691383219955,
      "loop": false
    },
    "screwdriver": {
      "start": 268,
      "end": 293.9140589569161,
      "loop": false
    }
  }
}

And the project directory:

Also, I'm getting Chrome' AudioContext warning, and I'm not sure why because I'm indeed waiting for user interaction before playing:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.