React - событие onKeyDown

Я создаю свой собственный лайтбокс в React, и у меня проблема с реализацией события keyDown. Когда я открываю образ, я хочу иметь ключ a для образа - 1 и ключ d для образа + 1. Я реализовал console.info(e.key) только для того, чтобы проверить, все ли работает правильно. И я обнаружил проблему, что мое событие KeyDown работает только тогда, когда я фокусируюсь на кнопке слева или справа. Когда я нажимаю на фото, клавиши не работают.

Лайтбокс:

<div 
  onKeyDown = {this.nextButtonImage} 
  onClick = {this.closeLightbox} 
  className = "lightbox-container">
  <div className = "lightbox">
    <button onClick = {this.closeLightbox} className = "lg-close">
      <i className = "fas fa-times" />
    </button>
    <button onClick = {this.prevImage} className = "lg-arrows lg-left">
      <i className = "fas fa-caret-left" />
    </button>
    <button onClick = {this.nextImage} className = "lg-arrows lg-right">
      <i className = "fas fa-caret-right" />
    </button>
    <img src = {this.images[this.state.openImage].url} alt = "" />
  </div>
</div>

событие keyDown:

nextButtonImage = (e) => {
  console.info(e.key);
}