Build a Drum Machine

I am having trouble passing the last test. I pass all 6 tests and I also have the code to pass the last test, but when I implement it, I start getting problems.
Before implementing the piece of code that updates the string describing the associated audio clip to display, everything would work. When I press a key to play the drumpad, on the console it would show that it was pressed one time.

import React from 'react';
import './styles.scss';

const drumpads = [
    {
        drumpad: "Q",
        keycode: 81,
        src : "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3"
    },
    {
        drumpad: "W",
        keycode: 87,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-2.mp3"
    },
    {
        drumpad: "E",
        keycode: 69,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-3.mp3"
    },
    {
        drumpad: "A",
        keycode: 65,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-4_1.mp3"
    },
    {
        drumpad: "S",
        keycode: 83,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-6.mp3"
    },
    {
        drumpad: "D",
        keycode: 68,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Dsc_Oh.mp3"
    },
    {
        drumpad: "Z",
        keycode: 90,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Kick_n_Hat.mp3"
    },
    {
        drumpad: "X",
        keycode: 88,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3"
    },
    {
        drumpad: "C",
        keycode: 67,
        src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3"
    }
];

class DrumMachine extends React.Component{
    constructor(props){
        super(props);
        this.playAudio = this.playAudio.bind(this);
        this.state = {
            displayDrum:''
        };
    }



    playAudio(btn){
        let audio = document.getElementById(btn);
        console.log(audio);
        audio.play();

        //CODE BEFORE IMPLEMENTING
        // this.setState({
        //     displayDrum: btn
        // });
    }
    
    render(){
        document.addEventListener('keydown',(e)=>{
            console.log(e.key);
            for(let drum of drumpads){
                if(drum.drumpad === e.key.toUpperCase()){
                    this.playAudio(e.key.toUpperCase());
                }
            }
            // this.playAudio(e.key.toUpperCase());
        }); 

        return (
            <div id="drum-machine">
                {/* <h1>TEST TEST TEST</h1> */}
                <div id="display">
                    {this.state.displayDrum}
                </div>
                <div className="drums">
                    {drumpads.map((el)=>(
                        <div key={el.src} className="drum-pad" id="drumpad" onClick={()=>{this.playAudio(el.drumpad)}}>
                            {el.drumpad}
                            <audio src={el.src} id={el.drumpad} className='clip'></audio>
                        </div>
                    ))}
                </div>
            </div>
        );
        
    }
}

export default DrumMachine;

But when I implement the code this.setState({displayDrum: btn}); it shows on the console that every time I press a key for the drumpad to play it would say it was pressed twice, then I pressed another key and it doubled, and it kept going on. Why is it doubling in the console when I update my state? The page works as intended and the display of the drumpad pressed works,

but when I run the tests, the test is stuck on executing and the drumpad is pressed over 14,000 times.

Please help.

Basically when I update my state I start getting errors .