React drumpad pass handler to grandchild as props

JavaScript
1

hi campers i’m relatively new to react and trying to make the drumpad machine project in react
this is the code:

import React, { Component } from "react"
import "./App.css"
import {sounds} from './data/sounds-constants.js'
import Display from "./components/Display"
import Switch from "./components/Switches"
import Slider2 from "./components/Slider"
import Drumpad from "./components/Drumpad"


class App extends Component {
  constructor(...props) {
    super(...props);
    this.state = {
      power: false,
      bank:"Smooth piano kit",
      display: "Pulsa cualquier tecla",
      volume: 30
    };
    this.handleOnSlide = this.handleOnSlide.bind(this)
    this.handleSwitchPower = this.handleSwitchPower.bind(this)
    this.handleSwitchBank = this.handleSwitchBank.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount(){
    document.addEventListener('keydown', this.handleKeyDown )
    window.focus()
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeydown)
  }
  // handleKeyDown(e){
  //   if(e.keycode === )
  // }

  handleSwitchPower(event) {
    this.setState({
      power: event.target.checked,
      display: event.target.checked ? "On" : "Off"
    })
  }
  handleSwitchBank(event) {
    this.setState({
      bank: event.target.checked ? "Heater kit": "Smooth piano kit",
      display: event.target.checked ? "Heater kit": "Smooth piano kit"
    })
  }
  handleOnSlide(event) {
    this.setState({
      volume:event.target.value,
      display:event.target.value
    })
  }
  handleClick(e, props) {
    this.setState({
      display: this.props.id
    })
  }
 
  render() {
    return (

      <div className="App">
        <Display display={this.state.display} />
        <div className="Switches">
          <Switch
            name="power"
            onSwitch={this.handleSwitchPower}/>
          <Switch
            name="bank"
            onSwitch={this.handleSwitchBank}/>
        </div>
        <Slider2
        value={this.state.volume}
        onSlide={this.handleOnSlide} />
        <Drumpad 
          bank={this.state.bank === "Heater kit"? sounds["Heater kit"]: sounds["Smooth piano kit"]}
          handleClick={this.handleClick}
          />
      </div>
    );
  }
}

export default App;

import React from "react"
import Pad from '../components/Pad.jsx'
// import {sounds, MODE_NAMES} from '../data/sounds-constants.js'


/*child component*/



const Drumpad = props => (
    
    <div id='drum-machine'>
        <div id='drum-pads'>{props.bank.map(d => (
          <Pad
            key={d.name}
            id={d.name}
            letter={d.shortcut}
            src={d.link}
            onClick={props.handleClick}/>   
         ))}
        </div>
    </div>
)
export default Drumpad


/*grandchild component*/


const Pad = props => (
    <div 
        className='drum-pad'
        >
        <h1 >{props.letter}</h1>
        <audio id={props.letter}
            className='clip'
            src={props.src}>
        </audio>
    </div>
)
export default Pad

the problem is want to pass he onClick handler handleClick to the grandchild as props but not respond…

i’m missing in something? thanks