Как отправить событие mouseDown от родителя к дочернему компоненту?

Question

Я использую React для создания музыкального синтезатора, и я хотел бы вызывать события кнопок из событий клавиатуры.Как отправить события из родительского компонента в дочерний компонент?

Я попытался подключить слушатель к кнопке каждого дочернего компонента и отправить события кнопки от родительского компонента, но это не работает.

export default class App extends React.Component {

    handleKeyDown = event => {
        const key = event.key.toUpperCase();
        const evt = new MouseEvent("mousedown");
        document.getElementById(key).dispatchEvent(evt);
    }

    handleKeyUp = event => {
        const key = event.key.toUpperCase();
        const evt = new MouseEvent("mouseup");
        document.getElementById(key).dispatchEvent(evt);
    }

    render() {
        return (
            <div    id="main-content"
                    className="synthesizer-application"
                    onKeyDown={this.handleKeyDown}
                    onKeyUp={this.handleKeyUp}
                    tabIndex="0">
                // Keyboard renders the keys
                <Keyboard />
            </div>
        );
    }
}

export default class Key extends React.Component {
    // Methods not shown
    render() {
        return (
            <button className="key"
                    id={this.props.letter}
                    onMouseDown={this.handleKeyPress}
                    onMouseUp={this.handleKeyRelease}>
                {this.props.letter}
            </button>
        );
    }
}

Я ожидаю, что кнопка получит событие, но вместо этого ничего не происходит.

Любая помощь приветствуется.