Не показываются последние две карточки слайдера

Я конечно же понимаю что слайдер он как слайдер но вот вопрос в том почему в этом Nuke Slider удалили props slidesToShow. Ну это безумие просто потому что убрать такой важнейший пропс это как выстрелить себе в ногу. А теперь перейду к теме. Так теперь как добиться результата чтобы в конце у меня бы показывались последние 2 карточки ? Потому что у меня как бы на одном контейнере показывается 4 карточки. То есть в общем карточек 10 и теперь в первых двух container 4 карточки показывает что и требовалось ожидать. Но вот куда пропали последние две карточки один Бог знает. То есть еще и третий контейнер должен быть прокручен и последними двумя карточками. Вот присылаю вам Код из React + СSS вместе с ним.

import React, { Component } from "react"
import axios from "axios"
import { Carousel } from "nuka-carousel"
import ReactPaginate from "react-paginate"
import Card from "./Card"

class Api extends Component {
  constructor(props) {
    super(props)
    this.state = {
      val: "",
      info: [],
      pages: 0,
    }
  }

  getInfo = async (page) => {
    const { val } = this.state
    const data = await axios
      .get("https://api.unsplash.com/search/photos?", {
        params: {
          client_id: "dpmmBCZxM_UnFVV9QjN9-bfCAN3rSBXSAiZvkeyJt44",
          query: val,
          page: page,
        },
      })
      .catch(() => console.log("Error in Code"))
    console.log(data)
    this.setState({ info: data.data.results, pages: data.data.total_pages })
  }

  render() {
    const { val, info, pages } = this.state
    return (
      <>
        <form
          onSubmit={(e) => {
            e.preventDefault()
            this.getInfo(1)
          }}
        >
          <input
            onChange={(e) => this.setState({ val: e.target.value })}
            type="text"
            value={val}
          />
          <button>SEARCH</button>
        </form>
        <Carousel
          className="slider"
          wrapMode="wrap"
          showArrows={true}
          showDots={true}
        >
          {info.map((item) => (
            <Card
              key={item.id}
              img={item.urls.raw}
              name={item.alt_description}
              desc={item.description}
              scrollMode="remainder"
            />
          ))}
        </Carousel>
        <ReactPaginate
          pageCount={pages}
          onPageChange={async ({ selected }) => {
            await this.getInfo(selected + 1)
          }}
        />
      </>
    )
  }
}

export default Api

My CSS STYLES:

.slider {
  width: 100%;
  border: 2px solid red;

  .card-col {
    min-width: 25%;
    padding: 0 15px;
  }

  .categoryCard {
    width: 100%;
  }

  .img-wrap {
    width: 100%;
    height: 500px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  h5 {
    font-size: 30px;
    font-weight: 900;
    margin: 10px 0;
  }

  p {
    font-size: 18px;
  }
}