Drum machine - need focus for keydown

This code works (but only if I have clicked on the drum machine first):

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress)
  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress)
  handleKeyPress(event) {
    switch(event.keyCode)  {
      case 67: //C
      case 88: //X
      case 90: //Z
      case 68: //D
      case 83: //S
      case 65: //A
      case 69: //E
      case 87: //W
      case 81: //Q
        const mySound = SA.find(element => element.keyCode === event.keyCode);
          name: mySound.name
        let audio = document.getElementById(mySound.keyL);

SA is an array of sounds:

const SA=[ //Sound Arrayconst keyToTrigger = {67:'C', 88:'X', 90:'Z', 68:'D', 83:'S', 65:'A', 69:'E', 87:'W',81:'Q'}
  {keyL: "Q", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",        name: "Heater 1",        keyCode: 81},
  {keyL: "W", url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",          name: "Dsc Oh",          keyCode: 87},
  {keyL: "E", url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",      name: "Kick 'n Hat",     keyCode: 69},
  {keyL: "A", url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",          name: "Cev H2",          keyCode: 65},
  {keyL: "S", url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3",         name: "Chord 1",         keyCode: 83},
  {keyL: "D", url: "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3", name: "Give us a light", keyCode: 68},
  {keyL: "Z", url: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3",          name: "Bld H1",          keyCode: 90},
  {keyL: "X", url: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3",    name: "Side stick 1",    keyCode: 88},
  {keyL: "C", url: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3",         name: "Brk Snr",         keyCode: 67}

Please advise how I can press the key without first clicking the drum machine first