This code works well in Vanilla JS, but when in a component of React audioContext.decodeAudioData(buffer) returns the error:

"Uncaught (in promise) DOMException: The buffer passed to decodeAudioData contains an unknown content type." (It needs an arrayBuffer)

When logging the buffer I pass to the decoder, it is indeed an ArrayBuffer. I have tried creating the ArrayBuffer in different ways, such as using different file types but nothing has worked.

I built this following documentation and some examples, so far I think it might be an issue wit React.

If someone has a workaround or a solution, It would be awesome. Thanks for taking the time.

import { audioContext, primaryGainControl } from "../App";

const Channel = () => {
  /*console.log(audioContext);
  console.log(primaryGainControl);*/
  const [volume, setVolume] = useState(80);
  const channelGain = audioContext.createGain();
  channelGain.gain.setValueAtTime(0.8, 0);
  channelGain.connect(primaryGainControl);

  //Global variables
  var startTime = 0;
  var offsetToResume = 0;
  var pauseTime = 0;
  var isPlaying = false;
  var songSource = audioContext.createBufferSource();
  var rate = 1;
  var isPlaying = false;
  var FILE_URL = "271417__soneproject__hats-6.wav";


  const playAudio = async () => {
    if (isPlaying) return;
    channelGain.gain.setValueAtTime(volume / 100, audioContext.currentTime);
    const response = await fetch(FILE_URL);
    const buffer = await response.arrayBuffer();

    const songBuffer = await audioContext.decodeAudioData(buffer); 
//Here is where the error occurs ^ ^
    songSource = audioContext.createBufferSource();
    songSource.buffer = songBuffer;
    songSource.connect(channelGain);
    startTime = audioContext.currentTime;
    songSource.start(audioContext.currentTime, offsetToResume);
    isPlaying = true;
  };

...