Problem using function with react-responsive-carousel

Question

I'm using react-responsive-carousel and trying to make that when I click on the slide image it opens a modal according to the code described below

The problem is that for each image I want it to open a different modal and the onClickItem field only accepts one function

import React, {useState} from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import styles from '../../styles/slider.module.css'
import dynamic from 'next/dynamic'


const Modal = dynamic(() => import('../Modal'), { ssr: false });

function Corrosel() {


 // const [secIsModalVisible1, setSecIsModalVisible1] = useState(false);
 const [secIsModalVisible2, setSecIsModalVisible2] = useState(false);
 const [secIsModalVisible3, setSecIsModalVisible3] = useState(false);

        return (
            <div className='text-center'>
              <Carousel 
              infiniteLoop={true}
              autoPlay={true}
              showIndicators={true}
              showThumbs={false}
              width='100%'
              transitionTime={2000}
              showArrows={true}
              swipeable={true}
              emulateTouch={true}
              centerMode={true}
              onClickItem={onChange}
              onClickThumb={true}
              centerSlidePercentage={85}
              axis="horizontal"
              className={styles.slider}>

                  <div className={styles.sliderimage}>
                      <img onClick={() => setSecIsModalVisible2(true)} 
                      src="/images/imagem_youtube.png" alt="image2" />
                      
                  </div>
                  <div className={styles.sliderimage}>
                      <img onClick={() => setSecIsModalVisible3(true)}
                      src="/images/imagem_youtube.png" alt="image3"/>
                      <p className="legend">Image 3</p>
  
                  </div>

              </Carousel>
              <div>
              <div>
          {secIsModalVisible2 ? (
          <Modal onClose={() => setSecIsModalVisible2(false)}>
          <div className={styles.tamanhovideotiktok}>
              <iframe
                src="https://www.tiktok.com/embed/7072819797184171310"
                className={styles.tamanhovideodentrotiktok}
                allowFullScreen="true"
                scrolling="no"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 
              ></iframe>
            <h4 className='px-0.5 py-0.5 ml-1 font-bold'>Veja o vídeo no facebook <a className='text-blue-600' href="https://web.facebook.com/watch/?v=678531976681251">aqui</a> </h4>
          </div>
          </Modal> 
          )  : null}
        </div>
        <div>
          {secIsModalVisible3 ? (
          <Modal onClose={() => setSecIsModalVisible3(false)}>
          <div className={styles.tamanhovideotiktok}>
          <iframe  className={styles.tamanhovideodentrofacebook} containerClassName={"youtubeContainer"}
            src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fweb.facebook.com%2Fneymarjr%2Fvideos%2F546587226603922%2F&show_text=true&width=560&t=0" 
            scrolling="no" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>    
            <h4 className='px-0.5 py-0.5 ml-1 font-bold'> Veja o vídeo no facebook <a className='text-blue-600' href="https://web.facebook.com/watch/?v=678531976681251">aqui</a> </h4>
          </div>
          </Modal> 
          )  : null}
        </div>
              </div>
            </div>
        );
    }


export default Corrosel