Есть код для виртуальной клавиатуры. Но после ввода с реальной клавиатуры перестает работать ввод с виртуальной. Что не так с кодом?

let keyboardButtons = document.querySelectorAll(".keyboard__button")
let outputBoard = document.querySelector(".keyboard-output")
let keyboardBox = document.querySelector(".keyboard-box")

keyboardBox.onchange = keyboard()

function keyboard() {
  for (let i = 0; i < keyboardButtons.length; i++) {
      let element = keyboardButtons[i];
      element.addEventListener("click", (e) => {
          let elVal = e.target.getAttribute('data-value')
          if (e.target.getAttribute('data-value') === "Backspace") {
              var output = outputBoard.value//BACKSPACE
              outputBoard.value = output.substring(0, output.length - 1);
          }
          if (e.shiftKey) {
              if (e.target.hasAttribute('data-value')) {
                  outputBoard.innerHTML += e.target.getAttribute('data-value')
              } else {
                  outputBoard.innerHTML += e.target.innerText
              }
          } else {
              outputBoard.innerHTML += e.target.innerText.toLocaleLowerCase()
          }

      })
      element.addEventListener("mousedown", () => element.classList.add("active"))
      element.addEventListener("mouseup", () => element.classList.remove("active"))
      element.addEventListener("mouseleave", () => element.classList.remove("active"))
  }

  //for reaction on real keyboard
  outputBoard.onkeydown = (event) => {
      outputBoard.innerHTML += event.key
      for (let i = 0; i < keyboardButtons.length; i++) {
          const element = keyboardButtons[i];
          if ((event.code === `Key${element.getAttribute('data-value')}`)) {
              element.classList.add("active")
          } else if ((event.code == `Key${element.getAttribute('data-value')}` || event.code == element.getAttribute('data-value'))) {
              element.classList.add("active")
          }
          setTimeout(() => element.classList.remove("active"), 200)
      }
  }

}

Вот HTML

<div class="keyboard-box">
                <textarea class="keyboard-output"></textarea>
                <div class="keyboard">
                    <div class="keyboard__row keyboard__row_l1">
                        <button data-value="~" class="keyboard__button keyboard__button_ktilda">`</button>
                        <button data-value="!" class="keyboard__button keyboard__button_k1 ">1</button>
                        <button data-value="@" class="keyboard__button keyboard__button_k2">2</button>
                        <button data-value="#" class="keyboard__button keyboard__button_k3">3</button>
                        <button data-value="$" class="keyboard__button keyboard__button_k4">4</button>
                        <button data-value="%" class="keyboard__button keyboard__button_k5">5</button>
                        <button data-value="^" class="keyboard__button keyboard__button_k6">6</button>
                        <button data-value="&" class="keyboard__button keyboard__button_k7">7</button>
                        <button data-value="*" class="keyboard__button keyboard__button_k8">8</button>
                        <button data-value="(" class="keyboard__button keyboard__button_k9">9</button>
                        <button data-value=")" class="keyboard__button keyboard__button_k0">0</button>
                        <button data-value="_" class="keyboard__button keyboard__button_kMinus">-</button>
                        <button data-value="+" class="keyboard__button keyboard__button_kPlus">=</button>
                        <button data-value="Backspace" class="keyboard__button keyboard__button_kBackspase">Backspase</button>
                    </div>
                    <div class="keyboard__row keyboard__row_l2">
                        <button data-value="Tab" class="keyboard__button keyboard__button_kTab">Tab</button>
                        <button data-value="Q" class="keyboard__button keyboard__button_kQ">Q</button>
                        <button data-value="W" class="keyboard__button keyboard__button_kW">W</button>
                        <button data-value="E" class="keyboard__button keyboard__button_kE">E</button>
                        <button data-value="R" class="keyboard__button keyboard__button_kR">R</button>
                        <button data-value="T" class="keyboard__button keyboard__button_kT">T</button>
                        <button data-value="Y" class="keyboard__button keyboard__button_kY">Y</button>
                        <button data-value="U" class="keyboard__button keyboard__button_kU">U</button>
                        <button data-value="I" class="keyboard__button keyboard__button_kI">I</button>
                        <button data-value="O" class="keyboard__button keyboard__button_kO">O</button>
                        <button data-value="P" class="keyboard__button keyboard__button_kP">P</button>
                        <button data-value="{" class="keyboard__button keyboard__button_kSqBL">[</button>
                        <button data-value="}" class="keyboard__button keyboard__button_kSqBR">]</button>
                        <button data-value="|" class="keyboard__button keyboard__button_k1Slash">\</button>
                    </div>
                    <div class="keyboard__row keyboard__row_l3">
                        <button data-value="CapsLock" class="keyboard__button keyboard__button_kCapsLock">Caps Lock</button>
                        <button data-value="A" class="keyboard__button keyboard__button_kA">A</button>
                        <button data-value="S" class="keyboard__button keyboard__button_kS">S</button>
                        <button data-value="D" class="keyboard__button keyboard__button_kD">D</button>
                        <button data-value="F" class="keyboard__button keyboard__button_kF">F</button>
                        <button data-value="G" class="keyboard__button keyboard__button_kG">G</button>
                        <button data-value="H" class="keyboard__button keyboard__button_kH">H</button>
                        <button data-value="J" class="keyboard__button keyboard__button_kJ">J</button>
                        <button data-value="K" class="keyboard__button keyboard__button_kK">K</button>
                        <button data-value="L" class="keyboard__button keyboard__button_kL">L</button>
                        <button data-value=":" class="keyboard__button keyboard__button_kSemicolumn">;</button>
                        <button data-value="" class="keyboard__button keyboard__button_kParentis">"</button>
                        <button data-value="Enter" class="keyboard__button keyboard__button_kEnter">Enter</button>
                    </div>
                    <div class="keyboard__row keyboard__row_l4">
                        <button data-value="ShiftLeft" class="keyboard__button keyboard__button_kShift">Shift</button>
                        <button data-value="Z" class="keyboard__button keyboard__button_kZ">Z</button>
                        <button data-value="X" class="keyboard__button keyboard__button_kX">X</button>
                        <button data-value="C" class="keyboard__button keyboard__button_kC">C</button>
                        <button data-value="V" class="keyboard__button keyboard__button_kV">V</button>
                        <button data-value="B" class="keyboard__button keyboard__button_kB">B</button>
                        <button data-value="N" class="keyboard__button keyboard__button_kN">N</button>
                        <button data-value="M" class="keyboard__button keyboard__button_kM">M</button>
                        <button data-value="," class="keyboard__button keyboard__button_kTriBL"><</button>
                        <button data-value="." class="keyboard__button keyboard__button_kTriBR">></button>
                        <button data-value="/" class="keyboard__button keyboard__button_kQest">?</button>
                        <button data-value="ShiftRight" class="keyboard__button keyboard__button_k1Shift">Shift</button>
                    </div>
                    <div class="keyboard__row keyboard__row_l5">
                        <button data-value="ControlLeft" class="keyboard__button keyboard__button_kCtrl">Ctrl</button>
                        <button data-value="" class="keyboard__button keyboard__button_kFn">Fn</button>
                        <button data-value="MetaLeft" class="keyboard__button keyboard__button_kWin">Win</button>
                        <button data-value="AltLeft" class="keyboard__button keyboard__button_kAlt">Alt</button>
                        <button data-value="Space" class="keyboard__button keyboard__button_kSpace">_</button>
                        <button data-value="AltRight" class="keyboard__button keyboard__button_kAlt">Alt</button>
                        <button data-value="ContextMenu" class="keyboard__button keyboard__button_kAltGR">AltGR</button>
                        <button data-value="ControlRight" class="keyboard__button keyboard__button_kCtrl">Ctrl</button>
                    </div>
                </div>
            </div>