Help: Error in Drum Machine project

1

Hi,

I am facing a difficulty in the Drum Machine project.

Error:
6. When I press the trigger key associated with each .drum-pad, the audio clip contained in its child

Code:

import React from "react";

import ReactDom from "react-dom";

const sounds = [

  {

    idnum: "1",

    id: "Q",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",

  },

  {

    idnum: "2",

    id: "W",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",

  },

  {

    idnum: "3",

    id: "E",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",

  },

  {

    idnum: "4",

    id: "A",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",

  },

  {

    idnum: "5",

    id: "S",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",

  },

  {

    idnum: "6",

    id: "D",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",

  },

  {

    idnum: "7",

    id: "Z",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",

  },

  {

    idnum: "8",

    id: "X",

    src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",

  },

  {

    idnum: "9",

    id: "C",

    src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",

  },

];

class SoundButton extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      audioSource: "not clicked",

    };

    this.soundOn = this.soundOn.bind(this);

  }

  buttonRef = React.createRef();

  audioRef = React.createRef();

  soundOn() {

    console.log(this.audioRef.current);

    this.audioRef.current.play();

  }

  render() {

    const { info } = this.props;

    return (

      <button

        ref={this.buttonRef}

        className="drum-pad"

        id={info["idnum"]}

        onClick={this.soundOn}

      >

        {info["id"]}

        <audio

          ref={this.audioRef}

          src={info.src}

          className="clip"

          id={info.id}

          type="audio/mp3"

        ></audio>

      </button>

    );

  }

}

class Button extends React.Component {

  // any other logic

  render() {

    return sounds.map((info) => <SoundButton info={info} key={info.id} />);

  }

}

export default Button;

Kindly help me through this.

Thanks!