Help with getting sounds on drum machine on click

I’ve got my drum machine to work when the keys are pressed but when it gets clicked on once, it doesn’t work. However, if you click on the same button twice, it does play the correct sound. I tried making my click function recursive by setting a variable of count to zero and adding one to it when count calls itself and checking with an if statement like so

if(count === 0) {
this.click(e);
count += 1;
}

but in the console I got an error too much recursion. then I thought that maybe setting state to the key was taking more time so I set the function calls of playSound and updateDisplay in a set timeout for 100 milliseconds but that still didn’t fix it. Here’s alink to the codepen and I’ll post the js code below.

let sounds = {
  Q: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
  W: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
  E: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
  A: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
  S: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
  D: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
  Z: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
  X: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
  C: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
}
let names = {
  Q: "Heater-1",
  W: "Heater-2",
  E: "Heater-3",
  A: 'Heater-4_1',
  S: 'Heater-6',
  D: 'Dsc_Oh',
  Z: 'Kick_n_Hat',
  X: 'RP4_KICK_1',
  C: 'Cev_H2'
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: "display",
      key: ""
    }
  }


  componentDidMount () {
    document.addEventListener("keydown", this.handleKey)
  }
  click = e =>{
    this.setState({
      key: e.target.innerHTML;
    });
    setTimeout(
    this.playSound(e.target.innerHTML)
    this.updateDisplay(e.target.innerHTML)
    )
  }

  handleKey = e => {
    if (sounds.hasOwnProperty(e.key.toUpperCase())) {
      let key = e.key.toUpperCase();
      this.setState({
        key: key
      })
      this.playSound(key)
      this.updateDisplay(key)
    }

  }
  playSound = key => {
    let sound = document.getElementById(`${key}`);
    sound.play()
  }
  updateDisplay = key => {
    console.log(key)
    console.log(names[key]);
    this.setState({
      display: names[key]
    })
    console.log(this.state)
  }

  render () {
    return (
    <div id="drum-machine">
        <h1>I am a Drum Machine</h1>
        <p> you may want to check the volum on your audio</p>
        <Display click={this.click} display={this.state.display} sound={this.state.key} key={this.state.key}/>
    </div>
    )
  }
}

const Display = (props) => {
  let buttons = [];
  for (const key in sounds) {
    buttons.push({key: sounds[key], name: names[key], id: key})
  }
  return (
  <React.Fragment>
    <input value={props.display} id="display"/>
      {buttons.map(obj => {
        return (
          <div>
          <button id={obj.name}
            className="drum-pad"
            src={obj.key}
            onClick={props.click}
            >{obj.id}</button>
          <audio className="clip" id={obj.id} data-key={obj.id} src={obj.key}> </audio>
            </div>
        )
      })}
  </React.Fragment>
  )
}

ReactDOM.render(<App />,document.getElementById('root'));

One of the test cases states that the drumpad element that I have as a button element needs to have an audio child element. When I try to make the button element a div that has the audio element as a child, I add bootstrap class btn btn-primary it doesn’t respond to clicks. If anyone knows how to solve this, that would help too.