How to show the next array item inside a card

[rich1n]

I'm doing a standard mapping like this; I use slice(0,1) to get only the first array item; without the slice will show all 10 categories in it own card

<div ClassName="card-div">
  {carsTypes.map((carsType, i) => (
     <div key={i}>
         <div className="car-type-title">   
            <h6>{CarsType.title}</h6>

            // The following makes a pagination number. i.e.: 1/10
            <p>{carsTypes.indexOf(carsType) + 1} / {carsTypes.length}</p>
            <button type="button">Next Car Type </button>
         </div>

          // This section map all the category names inside the card
         {strapi[carsType.id].map((cars, i) => {
            const brand = cars.brand
            return (
              <p className="cars-card-type" key={i}>
                <Link
                  to={carsType.getPath(brand)}
                  className="btn-nav rounded-3"
                >
                  {brand}
                </Link>
              </p>   
            )
          })}
        </div>
      ))}

How can create a button or a div that when users click on it; will pass the next card type (or category) from 1/10 to 2/10... so on 3/10, 4/10 ...?