DOMException: Failed to load because no supported source was found. React

Question

I was getting this error when I want to play an audio in my website, I tried some things that I found in others questions, but it doesn't work to me. This is the code:

import { useEffect, useRef, useState } from "react";
import MusicPlayer from "../Molecules/MusicPlayer";
import { songList } from "../../tools/songList";

function NavBar(props) {
  const [songs, setSongs] = useState([]);
  const [isPlaying, setIsPlaying] = useState(false);
  const [songOn, setSongOn] = useState(0);
  let songPlayer = useRef(null);
  useEffect(() => {
    setSongs(songList);
  }, []);

  let pickSong = (index) => {
    songPlayer.current.src = songs[index].audio;
  };

  let playSong = () => {
    songPlayer.current.load();
    songPlayer.current
      .play()
      .then((_) => {})
      .catch((err) => {
        console.info(err);
      });
  };

  let pauseSong = () => {
    songPlayer.current.pause();
  };

  return (
    <>
      <div className="nav-bar">
        <MusicPlayer
          songs={songs}
          playSong={playSong}
          currentSong={songPlayer}
          pauseSong={pauseSong}
          isPlaying={isPlaying}
          setIsPlaying={setIsPlaying}
          pickSong={pickSong}
          setSongOn={setSongOn}
          songOn={songOn}
        />
      </div>
      <audio
        src={songs[0] !== null && songs[0] !== undefined ? songs[0].audio : ""}
        ref={songPlayer}
      ></audio>
    </>
  );
}

export default NavBar;

import React from "react";
import "./MusicPlayer.css";

function MusicPlayer(props) {
  const prevSong = () => {
    if (props.songs[props.songOn - 1] !== undefined) {
      props.pickSong(props.songOn - 1);
      props.playStop();
      props.setSongOn(props.songOn - 1);
      props.setIsPlaying(true);
    } else if (props.songs[props.songOn - 1] === undefined) {
      props.pickSong(props.songs.length - 1);
      props.playStop();
      props.setSongOn(props.songs.length - 1);
      props.setIsPlaying(true);
    }
  };

  const nextSong = () => {
    if (props.songs[props.songOn + 1] !== undefined) {
      props.pickSong(props.songOn + 1);
      props.playSong();
      props.setSongOn(props.songOn + 1);
    } else if (props.songs[props.songOn + 1] === undefined) {
      props.pickSong(0);
      props.playSong();
      props.setSongOn(0);
    }
  };

  const playPause = () => {
    if (props.currentSong.current.paused) {
      props.playSong();
      props.setIsPlaying(true);
    } else {
      props.pauseSong();
      props.setIsPlaying(false);
    }
  };

  return (
    <div className="player">
      <div className="main">
        <div className="controls">
          <div className="prev-control" onClick={() => prevSong()}>
            <i className="fas fa-step-backward"></i>
          </div>
          <div
            className="play-pause-control paused"
            onClick={() => playPause()}
          >
            <i className="fas fa-play"></i>
            <i className="fas fa-pause"></i>
          </div>
          <div className="next-control" onClick={() => nextSong()}>
            <i className="fas fa-step-forward"></i>
          </div>
        </div>
        <div className="details">
          <p></p>
        </div>
        <div className="seekbar">
          <input type="range" />
        </div>
      </div>
    </div>
  );
}

export default MusicPlayer;

Is there a way to play the audio using the react refs? Or would I have to change it? If you want more info you can let me know in the comments