Быстрая реакция при использовании слайдера карты не работает

почему слайдер React Slick не работает при использовании этого:

        <Slider className = "mb-24" {...settings}>
          {
            mockEventInfoArr.map((el => (
                <div onClick = {() => handleOpenEvent(el)}>
                  <li className = "flex-center fd-col">
                    <p className = "mb-12 fw-600 color-main">{el.name}</p>
                    <p className = "fs-small">{formatRelative(el.start, new Date(), { locale })}</p>
                  </li>
                </div>


            )))
          }
        </Slider>

но когда я использую это, это работает...

        <Slider className = "mb-24" {...settings}>

              <div onClick = {() => handleOpenEvent()}>
                <li className = "flex-center fd-col">
                  <p className = "mb-12 fw-600 color-main">{'asdsda'}</p>
                  <p className = "fs-small">{formatRelative(new Date(), new Date(), { locale })}</p>
                </li>
              </div>
    
              <div onClick = {() => handleOpenEvent()}>
                <li className = "flex-center fd-col">
                  <p className = "mb-12 fw-600 color-main">{'asdsda'}</p>
                  <p className = "fs-small">{formatRelative(new Date(), new Date(), { locale })}</p>
                </li>
              </div>
        </Slider>

Что я делаю неправильно?

Вот изображение, как это выглядит, когда я использую карту

введите сюда описание изображения

€: Вот мои настройки

const settings = {
  dots: true,
  infinite: true,
  autoplay: true,
  speed: 1000,
  initalSlide: 1,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1,
};