React slide-show-image

Bonjour, dans le cadre d'un projet nous devons mettre en place un carrousel d'images avec React.
Les données (images de logements) proviennent d'un fichier JSON. Certains logements ont 4 images, d'autres 5 ou 6.
J'ai fait le choix d'utiliser react-slideshow-image, mon slideshow fonctionne parfaitement, le seul soucis est au niveau du nombre d'images par logement.
Comme le maximum de photos est de 6, j'ai créé 6 lignes "each-slide-effect" mais pour les logements qui en ont que 4 ou 5, cela créé des images "blanches" et donc une discontinuité dans mon diaporama.
Je pense qu'il faudrait que j'utilise une boucle pour palier à ce problème mais je sèche.
Merci par avance de votre aide.

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';
import '../../styles/Slideshow.scss';

const Slideshow = ( {pictures} ) => {
    const { id } = useParams();
    let rental = RentalsListing.find(i => i.id === id);
        return (
            <section id='slideshow'>
                <Slide>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[0]})` }}></div>
                    </div>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[1]})` }}></div>
                    </div>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[2]})` }}></div>
                    </div>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[3]})` }}></div>
                    </div>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[4]})` }}></div>
                    </div>
                    <div className="each-slide-effect">
                        <div style={{ 'backgroundImage': `url(${rental.pictures[5]})` }}></div>
                    </div>
                </Slide>
            </section>
      );

};

export default Slideshow;