Support for mouse element about simple-keyboard HOT 2 CLOSED

let commonKeyboardOptions = {
    ...
    syncInstanceInputs: true,
}

const keyboardMouseExtraOptions = {
    ...commonKeyboardOptions,
    layout: {
        default: ["{mouseextra2}", "{mouseextra1}"],
    },
    display: {
        "{mouseextra2}": "Mouse Extra 2 ↑",
        "{mouseextra1}": "↓ Mouse Extra 1",
    }
};

const keyboardMousePrimaryOptions = {
    ...commonKeyboardOptions,
    layout: {
        default: ["{wheelup}", "{mouse1} {mousemiddle} {mouse2}", "{wheeldown}"];,
    },
    display: {
        "{mouse1}": "Mouse 1",
        "{mouse2}": "Mouse 2",
        "{wheelup}": "Wheel Up",
        "{mousemiddle}": "Middle",
        "{wheeldown}": "Wheel Down",
    }
};

<div className="mouse">
    <Keyboard baseClass={"simple-keyboard-mouse-extra"}
              {...keyboardMouseExtraOptions}
    />
    <Keyboard baseClass={"simple-keyboard-mouse-primary"}
              {...keyboardMousePrimaryOptions}
    />
</div>

.mouse {
  display: flex;
  display-items: flex-end;
  text-align: center;

    .simple-keyboard-mouse-extra {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100px;
        
        .hg-button-mouseextra1, .hg-button-mouseextra2 {
            height: 85px;
        }
    }
      
    .simple-keyboard-mouse-primary {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .hg-button-wheelup {
            flex: 0 0 100px;
        }
        .hg-button-wheeldown {
            flex: 0 0 100px;
        }
    }
}

let keycodes = {
    ...
    '{mouseextra2}': 251,
    '{mouseextra1}': 252,
    '{mousemiddle}': 253,
    '{wheeldown}': 254,
    '{wheelup}': 255,
}