Как изменить элемент array на клик?

Есть array с фотографиями, который рендерится с помощью map:

<div className="about-pictures-container">
                { images.map(image => {
                  return (
                    <ImageCard
                    key = {person.id}
                    name = {eng ? person.nameENG : person.nameRU}
                    image = {person.img}
                    bio = {eng ? person.bioENG : person.bioRU}
                    />
                  )
                }) }
              </div>

Так выглядит сам компонент картинки.

<div className="image-card">
                            <div className="card-image-info-container">
                                <img className={"bio-img " + (showBio ? "invisible" : null)} src={image} onClick={toggleBio} />
                                <div className={"bio-text-container " + (showBio ? "bio-visible" : null)}>
                                    <p className="card-bio"> {bio} </p>
                                    <button className="btn bio-btn" onClick={() => toggleBio(id)}>Close</button>
                                </div>
                            </div>       
                            <p className="image-card-name"> {name} </p>
                        </div>

Пытаюсь сделать так, чтобы на клик по фотографии картинка исчезала, а на ее месте появлялась биография человека. За это отвечает эта функия:

toggleBio = id => {
      this.setState({
        showBio: ! this.state.showBio
      })
    }

Функция работает каряво, потому что на клик изменяет стейт абсолютно всех элементов. Знаю, что нужно на клик сделать проверку id, но пока не до конца понимаю как именно это сделать.
Как сделать так, чтобы изменялось состояние только того элемента, на который кликнул пользователь?