Drum Machine 5/8 Passes, Not sure what to do

Hey, i quickly built this challenge in vs code and functionally it works, but i am hopelessly stuck on passing the tests, simply playing the audio is not enough. Tried ref, tried pointing to children, the biggest problem i have no idea why and what to even begin to do. I looked around online and people featured projects that fail just like mine.

I had to remove the sound file links, because i am a new user.

+++JS

import React, { Component } from “react”;
import ReactDOM from “react-dom”;
import “./drumMachine.css”;
// import $ from “jquery”;
/////TEST
import ReactFCCtest from “react-fcctest”;

class App extends Component {
render() {
return (




);
}
}
/////

const notes = [
{
keyCode: 81,
keyTrigger: “Q”,
id: “Chord-1”,
url:
},
{
keyCode: 87,
keyTrigger: “W”,
id: “Chord-2”,
url:
},
{
keyCode: 69,
keyTrigger: “E”,
id: “Chord-3”,
url:
},
{
keyCode: 65,
keyTrigger: “A”,
id: “Shaker”,
url:
},
{
keyCode: 83,
keyTrigger: “S”,
id: “Open-HH”,
url:
},
{
keyCode: 68,
keyTrigger: “D”,
id: “Closed-HH”,
url:
},
{
keyCode: 90,
keyTrigger: “Z”,
id: “Punchy-Kick”,
url:
},
{
keyCode: 88,
keyTrigger: “X”,
id: “Side-Stick”,
url:
},
{
keyCode: 67,
keyTrigger: “C”,
id: “Snare”,
url:
}
];

class DrumMachine extends Component {
state = {};

playMusic = sound => {
new Audio(sound).play();
// console.log(document.getElementById(sound));
// new Audio(document.getElementById(sound).src).play();
};

buttons = notes.map(e => (
<button
id={e.keyCode}
className=“drum-pad”
onClick={() => this.playMusic(e.url)}
// onClick={() => this.playMusic(e.keyTrigger)}
// onClick={() => this.playMusic(this[e.keyTrigger].children[0].src)}
ref={ref => {
this[e.keyTrigger] = ref;
}}
>
{e.keyTrigger}


));

render() {
return (


{this.buttons}


Drum Machine



);
}
}

ReactDOM.render(, document.getElementById(“root”));