next.js - 按钮在反应响应轮播中不起作用

Question

我在 next.js 中使用 react-responsive-carousel 作为主页。我在轮播中有按钮和一些文本，通过单击按钮我想控制台.log 不起作用，

const options = {
  showArrows: false,
  showStatus: false,
  showIndicators: false,
  showThumbs: false,
  autoPlay: true,
  infiniteLoop: true,
  stopOnHover: false,
  swipeable: false,
  animationHandler: 'fade',
};
const MainPage = () => {
  return (
    <>
      <Carousel {...options}>
        {homeData.map((el) => (
          <div key={el.id}>
            <div
              className={styles.header}
              style={{
                backgroundImage: `url(${el.image})`,
              }}
            >
              <h1 className={styles.primaryheading}>{el.heading}</h1>
              <h1 className={styles.secondaryheading}>{el.text}</h1>
               <button onClick={()=> console.log('Clicked')} >Click</button> //Not working here
            </div>
          </div>
        ))}
      </Carousel>
    </>
  );
};

export default MainPage;