Numéroter un react-slideshow-image

Bonjour,
moi je ferai quelque chose de ce style

import React from "react";
import { Slide } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
import { useParams } from "react-router-dom";
import RentalsListing from "../../datas/RentalsListing.json";

const Slideshow = () => {
    const { id } = useParams();
    let rental = RentalsListing.find((i) => i.id === id);

    // Nb d'images à afficher
    const picturesNb = Math.min(rental.pictures.length);

    // Tableau pour chaque image
    const pictures = [];
    for (let i = 0; i < picturesNb; i++) {
      pictures.push(
        <React.Fragment key={i}>
          <div className="each-slide-effect">
            <div style={{ backgroundImage: `url(${rental.pictures[i]})` }}></div>
          </div>
          <div className="position">
            <p>
              {i+1}/{picturesNb}
            </p>
          </div>
        </React.Fragment>
      );
    }

    return (
      <section id="slideshow">
      <Slide>{pictures}</Slide>
    </section>
  );
};

export default Slideshow;

Hello, je le ferai comme ceci pour ma part pas besoin