Выбрать один элемент за раз из массива объектов в javascript

У меня есть реактивный компонент

import React, { useState } from 'react';
import { I18nText, EmphasisTag, IconButton, Icon } from '@wtag/react-comp-lib';

const corporateBooking = [
  {
    id: 1,
    video: 'https://www.youtube.com/embed/zKIJ69DWkd0?autoplay=1',
    thumb: 'https://img.youtube.com/vi/zKIJ69DWkd0/0.jpg',
    label: <I18nText id = "tutorials.label2" />,
    name: '1. Session - Onboard the customer Organisation / Corporate',
    time: <EmphasisTag type = "neutral" size = "small" text = "30:36" />,
    description: <I18nText id = "tutorials.webinar.description_ten" />,
  },
  {
    id: 2,
    video: 'https://www.youtube.com/embed/RmFvY-ZjYHw?autoplay=1',
    thumb: 'https://img.youtube.com/vi/RmFvY-ZjYHw/0.jpg',
    label: <I18nText id = "tutorials.label3" />,
    name: '2. Session - Setup Online Booking Tool',
    time: <EmphasisTag type = "neutral" size = "small" text = "21:50" />,
    description: <I18nText id = "tutorials.webinar.description_eleven" />,
  },
  {
    id: 3,
    video: 'https://www.youtube.com/embed/izqERVEF1cQ?autoplay=1',
    thumb: 'https://img.youtube.com/vi/izqERVEF1cQ/0.jpg',
    label: <I18nText id = "tutorials.label4" />,
    name: '3. Session - Leverage on the  Online Booking Tool',
    time: <EmphasisTag type = "neutral" size = "small" text = "11:15" />,
    description: <I18nText id = "tutorials.webinar.description_twelve" />,
  },
  {
    id: 4,
    video: 'https://www.youtube.com/embed/uwU5MLdJvwc?autoplay=1',
    thumb: 'https://img.youtube.com/vi/uwU5MLdJvwc/0.jpg',
    label: <I18nText id = "tutorials.label5" />,
    name: '4. Session - Organisational policies and rules',
    time: <EmphasisTag type = "neutral" size = "small" text = "29:51" />,
    description: <I18nText id = "tutorials.webinar.description_thirteen" />,
  },
];

const CorporateBooking = () => {
  const [showVideo, setShowVideo] = useState(false);

  return (
    <div>
      {corporateBooking.map(
        ({ video, label, time, description, id, thumb }) => (
          <div key = {id} className = "grid">
            <div className = "col-xlg-3 col-lg-4 col-md-6 col-sm-8 col-xs-12 col-xxs-12 hidden-xs hidden-xxs tutorials__videos">
              <div className = "ihover">
                <div className = "ihover_image">
                  <img src = {thumb} alt = "tutorial" className = "img-responsive" />
                  <div className = "ihover_hover">
                    <div className = "ihover_hover--content">
                      <IconButton
                        id = {id}
                        icon = {<Icon name = "youtubeRectangular" />}
                        label = "Play"
                        onClick = {() => setShowVideo(!showVideo)}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className = "col-xlg-3 col-lg-4 col-md-6 col-sm-8 col-xs-12 col-xxs-12 hidden-xlg hidden-lg hidden-md hidden-sm tutorials__videos">
              <iframe
                src = {video}
                title = "WellTravel"
                frameBorder = "0"
                allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen = {true}
              />
            </div>

            <div className = "col-xlg-9 col-lg-8 col-md-6 col-sm-4 col-xs-12 col-xxs-12 tutorials__videos">
              <div>
                <a
                  href = {video}
                  className = "tutorials__videos-link"
                  target = "_blank"
                  rel = "noopener noreferrer"
                >
                  {label}
                </a>
              </div>
              <div className = "tutorials__time">{time}</div>
              <div className = "tutorials__videos-description">{description}</div>
            </div>
            {showVideo ? (
              <div className = "col-12" id = {id}>
                <iframe
                  src = {video}
                  title = "WellTravel"
                  frameBorder = "0"
                  allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen = {true}
                />
              </div>
            ) : null}
          </div>
        ),
      )}
    </div>
  );
};

export default CorporateBooking;

В этой текущей реализации всякий раз, когда я нажимаю один из IconButton во встроенном видео YouTube, все видео начинают воспроизводиться в iframe под каждым из видео одновременно. Но я хочу воспроизвести только видео, чье IconButton я нажал не все. Какие изменения необходимо внести в текущую кодовую базу, чтобы добиться этого?