Drum Machine with React Hooks

Hello!
I’m trying to finish this project using react hooks but I got stuck.
I can’t figure it out how to click a button and play the corresponding audio.
I guess I should use useRef but I can’t find a solution yet.

Here’s my code, thanks!

const dataset = [{
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  }, {
    keyCode: 83,
    keyTrigger: 'S',
    id: 'Clap',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  }, {
    keyCode: 68,
    keyTrigger: 'D',
    id: 'Open-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  }, {
    keyCode: 90,
    keyTrigger: 'Z',
    id: "Kick-n'-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  }, {
    keyCode: 88,
    keyTrigger: 'X',
    id: 'Kick',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  }, {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
]

const ComicContext = React.createContext()

function App(){
  const [ display, setDisplay ] = React.useState('')
  const [ data, setData ] = React.useState(dataset)
  
  return (
    <ComicContext.Provider value={{ data:data }}>
      <div id="drum-machine">
        <div id="display">{ display }</div>
        <div id="drumpads">
          <Drumpad/>
        </div>
      </div>
    </ComicContext.Provider>
    )
  }

function Drumpad(){
  const {data} = React.useContext(ComicContext)
  
  const inputRef = React.useRef()
  
  { return( data.map(d => (
    <div 
      className="drum-pad" 
      id={d.id}
      onClick={() => console.log(inputRef.current)}>
      <p>{d.keyTrigger}</p>
      <audio  ref={ inputRef }
              className='clip'
              src={d.url}
              id={d.keyTrigger}>
      </audio>
    </div>)))
   }
}

The original snippets:

onClick={handleClick}>
<p>{letter}</p>
<audio ref={ref => this.audio = ref}
       className='clip'
       src={url}
       id={letter}>
 </audio>

and the function handleClick:

handleClick = () => {
    this.audio.play()
    this.audio.currentTime = 0
    this.props.handleDisplay(this.props.id)
  }