Почему я получаю ошибку ReferenceError: Audio is not defined in NextJs?

Итак, у меня есть компонент Next, который может воспроизводить или останавливать музыку (точно так же, как MP3-плеер). Он отлично работает, когда я запускаю его на локальном сервере, когда я нажимаю кнопку, звук воспроизводится или останавливается. Но, тем не менее, я получаю сообщение об ошибке в терминале:

И вот мой полный исходный code:

Как мне решить эту проблему? Я использую Typescript :D

src\components\bgmAudio.tsx (6:31) @ Audio
 ⨯ ReferenceError: Audio is not defined
    at BgmAudio (./src/components/bgmAudio.tsx:13:72)
digest: "2253870762"

  4 | export default function BgmAudio() {
  5 |   const [isPlaying, setIsPlaying] = useState(false);
> 6 |   const audioRef = useRef(new Audio("/audio/bgmAmbient.MP3"));
    |                               ^

"use client";
import { useEffect, useState, useRef } from "react";

export default function BgmAudio() {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(new Audio("/audio/bgmAmbient.MP3"));

  const bgmPlay = () => {
    if (!isPlaying) {
      setIsPlaying(true);
      audioRef.current.play();
    } else {
      setIsPlaying(false);
      audioRef.current.pause();
    }
  };

  return (
    // Play or stop the audio button
    <div className="w-8 fill-textBase active:scale-90s" onClick={() => bgmPlay()}>
      {isPlaying && (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        </svg>
      )}
      {!isPlaying && (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
        </svg>
      )}
    </div>
  );
}