Build a Drum Machine (play sound) - solved

JavaScript
1

Hi everyone,
I’m trying to get the sound to play when I click the button, but it doesn’t.
Can anyone please give me some hints?
Thanks

Here is a link to codepen

spoiler 
const DrumPad = (props) => {
  return (
  <button 
    className='drum-pad'
    onClick={() => props.handleClick(props.id)}>   
     <audio  
       id={props.id}
       className='clip'>
          <source 
            src={props.sound}
            type='audio/mp3' />         
     </audio>
       {props.id} 
  </button>
  )
}

const DrumDisplay = (props) => {
  return (
    <div>
       <DrumPad 
                id='Q'
                handleClick={props.handleClick}
                sound={"https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav" }
                />
    </div>
  )
}


class DrumMachine extends React.Component {
  constructor(props){
    super(props);
    
  }
  
 handleClick(id) { 
   const sound = document.getElementById(id); 
   sound.play();
  }
 
  render(){
    const status = 'Pad: '
    return(
      <div id='drum-machine'>
        <div id='display'>
            <div className='status'>{status}</div>    
              <DrumDisplay 
                handleClick={this.handleClick}
                />
        
    
    
        </div>
      </div>
    )
  }
}

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

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge: