Why doesn't play() work on my Drum Machine?

https://codepen.io/gobsmack90/pen/NWGoXyb

This looks fine to me but isn’t working. Please help me understand why?

If you wanted to use ref, I’m afraid you haven’t created one yet.
Your play function not addressing audio element.

onclick in html is actually window.onclick.
Not sure if it’s the correct approach, but it’s working.

const DrumPad = (props) => {
  let playAudio = () => {
    this.event.target.previousSibling.play();
  }
  
  return (
    <div id={props.idName} className='drum-pad'>
      <audio src={props.source} className='clip' id={props.keyboard} autoplay="false" />
      <button onClick={playAudio}>{props.keyboard}</button> 
    </div>
  )
}