Javascript-форум - Проблема с необновляемым курсором

Приветствую, эксперты. Нужен совет по простой с первого взгляда задаче:

Есть контейнер с отсутствующим курсором (cursor: none).
Есть скрытый overlay в контейнере (display: none), который появляется при зажатии пробела. У overlay курсор есть (cursor: default).

Ожидаемое поведение:
При нахождении указателя мыши внутри контейнера (курсора нет) и при зажатии пробела должен появляться overlay под указателем мыши. Курсор соответственно тоже должен появляться, так как под указателем мыши находится overlay со стилем "cursor: default".

Проблема:
Курсор не появляется до тех пор, пока не сдвинешь мышь.

Наблюдения:

В Firefox код работает с ожидаемым поведением, но не работает в Chromium браузерах.
Если overlay скрыт не с помощью "display: none", а с помощью "visibility: hidden", то код перестаёт работать и в Firefox тоже.
Аналогичная проблема и с псевдо-классом ":hover", который не активируется до тех пор, пока не сдвинешь мышь.
Если запустить код здесь, во iframe, из сообщения, то код будет работать и в Chromium браузерах тоже.

Пример кода:

<!DOCTYPE html>
  <head>
    <style>
      #container {
        width: 600px;
        height: 400px;
        outline: 2px dashed red;
        cursor: none;
      }

      #overlay {
        width: 100%;
        height: 100%;
        background: lightskyblue;
        cursor: default;
      }

      #overlay.hidden {
        display: none;
      }
    </style>

    <script>
      document.addEventListener('keydown', (e) => {
        if (!e.repeat && e.code === 'Space') {
          overlay.classList.remove('hidden');
          e.preventDefault();
        }
      });

      document.addEventListener('keyup', (e) => {
        if (!e.repeat && e.code === 'Space') {
          overlay.classList.add('hidden');
          e.preventDefault();
        }
      });
    </script>
  </head>

  <body>
    <div id="container">
      <div id="overlay" class="hidden"></div>
    </div>
  </body>
</html>