Drum machine fails test #7

1

The drum still makes a sound but it fails the test, any ideas?

const keys = [{
  name: 'Q',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
  description: 'Heater-4_1',
  },{
  name: 'W',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
  description: 'Heater-1',
  },{
    name: 'E',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
  description: 'Kick_n_Hat',
  },{
    name: 'A',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3',
  description: 'Chord_1',
  },{
    name: 'S',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3',
  description: 'punchy_kick_1',
  },{
    name: 'D',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
  description: 'Brk_Snr',
  },{
    name: 'Z',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',
  description: 'Dry_Ohh',
  },{
    name: 'X',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
  description: 'Heater-3',
  },{
    name: 'C',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
  description: 'Dsc_Oh',
  },
];

class App extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      play:false,
      description:'Press any of the below keys',
    };
    this.keyPressed = this.keyPressed.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount(){
    document.addEventListener('keydown', this.keyPressed);
  }
  
  componentWillUnmount(){
    document.addEventListener('keydown', this.keyPressed);
  }
  
  keyPressed(e){
    const key = e.keyCode;
    let newAudio = keys.find(item => {if (item.name.charCodeAt(item.name) == key) return item;});
    this.setState({
      description:newAudio.description,
    });
    
    let url = newAudio.url;
    let newClip = new Audio(url);
    newClip.play();
  }
  
  handleClick(e) {    
    this.setState({
      play:!this.state.play,
      description:e.target.id,
    });
    
    const audio = event.target.querySelector('audio');
    let myObject = Object.keys(audio);
    audio.play();
    audio.currentTime = 0;
  }
  
  render(){
    let drumpad = keys.map(item => <div id={item.description}>
        <button className='drum-pad' id={item.description} onClick={this.handleClick}>{item.name}
          <audio className='clip' id={item.name} src={item.url} ref={ref => this.audio = ref}/>
        </button>
    </div>);
    
    return (
      <div id='drum-machine'>
        <div id='display'>{this.state.description}</div>
        {drumpad}
      </div>
    );
  }
}
      
ReactDOM.render(<App />, document.getElementById('root'));