Problem to play different sounds in drum Machine React

Hi, I finally could deploy but I have problems to play different sounds,
Here is published.

the console throws this error:
Uncaught TypeError: n.props.handleDisplay is not a function

class App extends Component {
  componentDidMount() {
    console.log(this.audio)
    window.focus()
  } 

  constructor(props) {
    super(props);
    this.state = {
      currentSoundId: "click"
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleDisplay = this.handleDisplay.bind(this);
  }
  handleDisplay = (e) => {
    const value = e.currentTarget.id;
    this.setState({
      currentSoundId: `This sound now: ${value}`
    });
  };

  handleClick = () => {
    console.log("must sound", this.props.drumKey);
    this.audio.play();
    this.audio.currentTime = 0;
     // problem 1
    this.props.handleDisplay(this.props.drumKey);
  };

  render() {
    return (
      <div id="drum-machine" className="app">
        <Wrapper>
          <Display currentSoundText={this.state.currentSoundId} />
          <div className="display">
            {dataDrum.map(button => (
              <Button
                handleClick={this.handleClick}
                handleDisplay={this.handleDisplay}
                currentSoundId={button.name}
                drumKey={button.name}
                src={button.src}
                image={button.img}
                alt={button.name}
                // problem 2, i think
                result={ref => (this.audio = ref)}
              />
            ))}
          </div>
        </Wrapper>
      </div>
    );
  }
}

Please, if someone can help me … I’ve been stuck in this for a long time.
:pray::pray::pray::pray::pray::pray:

And here is my repo in github