Audio.play() on React gives error DOMException: Failed to load because no supported source was found

Question

When I run playAudio1() it doesn't play the sound, but playAudio2() does. I have hundreds of audio files in the folder. That is why I use require.context() since I cannot import each single one manually. Any thoughts on how I can make this work?

import React from 'react';
import Volume from '../../../../images/audio.png';
import Song from '../../../../audio/ES/banana.mp3';
const audio = require.context("../../../../audio/ES", true);

const ScreenKids = (props) => {
    return (
        <div>
            <div>
                <img src={Volume} onClick={() => playAudio1()} />
                <img src={Volume} onClick={() => playAudio2()} />
            </div>
        </div>
    );
}

function playAudio1() {
    new Audio(audio('./banana.mp3')).play();
}

function playAudio2() {
    new Audio(Song).play();
}

export default ScreenKids;

When I run audio.keys() as suggested by @bogdanoff I get the below result:

(224) ['./ambulance.mp3', …, './banana.mp3', …]

Answer 1

After a lot of debugging I was able to fix this by upgrading package react-scripts from "4.0.2" to "^5.0.1".