Связать виртуальное пианино с миди-клавиатурой

мне нужно связать миди-пианино с виртуальным пианино ... Я не знаю, как создать мероприятие для этого. У меня есть связь с веб-миди и реактивным пианино, но я не знаю, как связать миди-пианино с виртуальным пианино. Я получаю входную информацию и номер ключа, но не знаю, как играть на виртуальном пианино, когда нажимаю на миди пианино.

const noteRange = {
  first: MidiNumbers.fromNote('c1'),
  last: MidiNumbers.fromNote('f5'),
};

export default class ResponsivePiano extends React.Component {

  state = {
    midiNote:'',
  }
  onNoteOnMidiKeyboard=(event) => {
    this.setState({
      midiNote: event.note
    });
  }

  componentDidMount(){

    WebMidi.enable((err) => {
      if (err) {
        console.info(' WebMidi n\'a pas pu être activé. ', err);
      } else {
        console.info(' WebMidi activé! ');
      }

      const input = WebMidi.inputs[0];
      input.addListener('noteon', 'all', this.onNoteOnMidiKeyboard.bind(this));

      console.info(WebMidi.inputs);
      console.info(WebMidi.outputs);

    });

  }


  render(){
    const { midiNote } = this.state;

    return (
      <div>
        <p>
        Midi number: {midiNote.number}


        </p>
        <DimensionsProvider>
          {({ containerWidth, containerHeight }) => (
            <SoundfontProvider
              instrumentName = "acoustic_grand_piano"
              audioContext = {audioContext}
              hostname = {soundfontHostname}
              render = {({ isLoading, playNote, stopNote }) => (
                <Piano
                  onChange = {this.onCurrentNote}
                  noteRange = {noteRange}
                  width = {containerWidth}
                  onPlayNote = {playNote}
                  onStopNote = {stopNote}
                  disabled = {isLoading}
                />
              )}
            />
          )}
        </DimensionsProvider>
        {}
      </div>
    );

  }


  }