ツールチップをEnterキーで表示/非表示切り替えたい

前提・実現したいこと

現在Reactの勉強をしています。
キーボードのEnterキーによる操作でツールチップの表示非表示を切り替えたいと思っています。
どのように実装するイメージでしょうか？

サンプルは以下です。クリックによる表示/非表示は可能
https://codepen.io/nekuta/pen/roQwzw

試したこと

以下ググる
・jsでのEnterキー操作の実装方法
・ツールチップの実装方法

以下でEnterでの閉じるはできた

js
1var $icons = $('i');
2var flg = true;
3var speed = 200;
4
5$icons.on('click', function () {
6  if (flg) {
7    flg = false;
8    var $baloon = $(this).next('.baloon');
9
10    if ($baloon.hasClass('is-active')) {
11      $baloon.removeClass('is-active').fadeOut(speed);
12    } else {
13      $('.baloon').removeClass('is-active').fadeOut(speed);
14      $baloon.addClass('is-active').fadeIn(speed);
15    }
16    setTimeout(function(){
17      flg = true;
18    },speed)
19  }
20  //他の箇所をEnterしたら閉じるように
21  window.document.onkeydown = function(event){
22    if (event.key === 'Enter') {
23      if (!$(event.target).closest('.baloon').length) {
24        $('.baloon').removeClass('is-active').fadeOut(speed);
25      }
26    }
27  }
28
29  return false;
30});