React - audio element not playing - "Uncaught (in promise) DOMException: Failed to load because no supported source was found"

I'm trying to create a drum machine using React but I can't get my audio clips to play via the onClick. I've browsed similar questions but none of them did it for me.

My Github: drum-machine

My code below. I originally had the audio clips in a separate Libs folder, but I've copied and pasted them in the specific component folder (DrumMachine) to see if the issue was related to the path, but it still doesn't work.

Folder structure

Code:

DrumMachine component

 import React from 'react';
    import './index.css';
    import DrumPad from '../DrumPad/index';
    
    export default function DrumMachine(props) {
        const keys = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];
        const elements = ["crash1", "crash2", "hatClosed1", "hatClosed2", "hatOpen1", "hatOpen2", "kick", "snare", "tambourine"];
        const audioClips = ["./Crash_1.wav", "./Crash_2.wav", "./Hat_Closed_1.wav", "./Hat_Closed_2.wav", "./Hat_Open_1.wav", "./Hat_Open_2.wav", "./Kick.wav", "./Snare_2.wav", "./Tambourine.wav"];
    
         async function handleClick(e) {
            const sound = await  new Audio (e);
            await sound.play();
        }
    
        return (
            <section id="drum-machine">
                <section id="display">
                    {keys.map((element, index) => {
                        console.log(audioClips[index]);
                        return (
        <DrumPad className="drum-pad" id={elements[index]} key={index} text={element} onClick={() => handleClick(audioClips[index])}>
                                <audio type="audio/WAV" src={audioClips[index]} className="clip" id={element}></audio>
                            </DrumPad>
                        )
                    })}
                </section>
            </section>
        )
    }

DrumPad component

import React from 'react';
import './index.css'

export default function DrumPad(props){
const className = props.className;
const id = props.id;
const text = props.text;
const handleClick = props.onClick

return (
    <section >
    <button id={id} className={className} onClick={handleClick}>
        {text}
        {props.children}
        </button>
     
    </section>
)
}

Appreciate your help.