on play / stop functions without pressing a button

[AvgustPol]

onPlayNoteInput/onStopNoteInput functions triggered logging to console even if I didn't press the key

Code:

import React, { useState } from 'react';
import { Piano, KeyboardShortcuts, MidiNumbers } from 'react-piano';
import SoundfontProvider from './soundfontProvider'
import 'react-piano/dist/styles.css';
import { getOctaves } from './services/octavesServices'

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const soundfontHostname = 'https://d1pzp51pvbm36p.cloudfront.net';

const noteRange = getOctaves(4)

const keyboardShortcuts = KeyboardShortcuts.create({
    firstNote: noteRange.first,
    lastNote: noteRange.last,
    keyboardConfig: KeyboardShortcuts.HOME_ROW,
});



function PianoInteractive(props) {
    const [isPlaying, setIsPlaying] = useState(0);
    const [pressedMidiNumbers, setPressedMidiNumbers] = useState([''])

    const recording = {
        mode: isPlaying ? 'PLAYING' : 'RECORDING',
        events: [{ "midiNumber": 53, "time": 0, "duration": 0.2 }],
        currentTime: 0,
        currentEvents: [{ "midiNumber": 50, "time": 0, "duration": 0.2 }, { "midiNumber": 53, "time": 0.2, "duration": 0.2 }, { "midiNumber": 55, "time": 0.4, "duration": 0.2 }, { "midiNumber": 57, "time": 0.6000000000000001, "duration": 0.2 }],
    }

    const onStopNoteInput = (midiNumber, { prevActiveNotes }) => {
        console.log({ onStopNoteInput_prevActiveNotes: prevActiveNotes });
        console.log({ onStopNoteInput: midiNumber });
    };

    const onPlayNoteInput = (midiNumber, { prevActiveNotes }) => {
        console.log({ onStopNoteInput_onPlayNoteInput: prevActiveNotes });
        console.log({ onPlayNoteInput: midiNumber });
    }

    const activeNotes =
        recording.mode === 'PLAYING' ? [MidiNumbers.fromNote(props.note)] : null;

    const onClickPlay = () => setIsPlaying(1)
    const onClickStop = () => setIsPlaying(0)

    return (
        <>
            <SoundfontProvider
                instrumentName="acoustic_grand_piano"
                audioContext={audioContext}
                hostname={soundfontHostname}
                render={({ isLoading, playNote, stopNote }) => (
                    <Piano
                        noteRange={noteRange}
                        width={700}
                        playNote={playNote}
                        stopNote={stopNote}
                        disabled={isLoading}
                        keyboardShortcuts={keyboardShortcuts}
                        activeNotes={activeNotes}
                        onPlayNoteInput={onPlayNoteInput}
                        onStopNoteInput={onStopNoteInput}
                    />
                )}
            />

            <div>
                <button onClick={onClickPlay}>Play</button>
                <button onClick={onClickStop}>Stop</button>
            </div>
        </>
    );
}

export default PianoInteractive;

[AvgustPol]

@kevinsqi
I`ve just found that there is a onMouseEnter event on each keyboard

Can I contribute to your project and improve this behavior?