Splide Slide issue when onClick elements are on a loop with perPage set

I have an issue when I want to click on an element in my Splide slider. Clicking on the first 5 elements of my first loop works, but as soon as the second loop of 5 elements comes in, the elements from my first loop that remain visible are no longer clickable.

It's quite frustrating because there might be only one clickable element out of five visible on the screen. I would like to make all visible elements clickable, but after searching on the Internet and various forums, I can't find a solution to this problem. If you can help me, I would be grateful! Thank you!

To understand the images, the direction is from top to bottom, so the second loop of 5 elements appears at the top of the Slide and the first loop of 5 elements disappears at the bottom of the Slide.

The first image represents the first loop of 5 elements where the click works (in green).

The second image shows when the first element of the second loop appears. This element is clickable (in green), and those from my old loop are no longer clickable (in red)

First loop with all elements clickable

Second loop appears and the first loop elements are not clickable

Is there a way to make all elements clickable?

import React from "react";
import styled from "styled-components";
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import "@splidejs/splide/dist/css/splide.min.css";


const StyledBanner = styled.div`
    margin: 0% 0px 0% 10%;

    img{
        height: 70%;
    }

`

function Banner({ comics, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
    const handleImageClick = (imageSrc) => {
        setSelectedImage(imageSrc);
    };

    return (
        <StyledBanner>
            <Splide
                className="splide"
                aria-label="My Slide"
                options={{
                    type: 'loop',
                    direction: 'ttb',
                    throttle: 1,
                    height: '75vh',
                    drag: true,
                    focus: 'top',
                    perPage: 5,
                    arrows: false,
                    autoScroll: {
                        speed: -0.1,
                        pauseOnHover: false,
                        pauseOnFocus: false,
                    },
                }}
                extensions={{ AutoScroll }}
            >
                <SplideSlide>
                    <img src={cover1} alt="Image 1" onClick={() => handleImageClick(cover1)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover2} alt="Image 2" onClick={() => handleImageClick(cover2)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover3} alt="Image 3" onClick={() => handleImageClick(cover3)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover4} alt="Image 4" onClick={() => handleImageClick(cover4)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover5} alt="Image 5" onClick={() => handleImageClick(cover5)} />
                </SplideSlide>
            </Splide>
        </StyledBanner>
    );
}

export default Banner;```

Instead of click on image you can also use slider onClick default function of splide slider I tried with onClick default option and it is working as you want

try this

import React from 'react';
import styled from 'styled-components';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import '@splidejs/splide/dist/css/splide.min.css';

const StyledBanner = styled.div`
  margin: 0% 0px 0% 10%;

  img {
    height: 70%;
  }
`;

function Banner({ comics, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
  const handleImageClick = (imageSrc) => {
    setSelectedImage(imageSrc);
  };

  return (
    <StyledBanner>
      <Splide
        className="splide"
        aria-label="My Slide"
        options={{
          type: 'loop',
          direction: 'ttb',
          throttle: 1,
          height: '75vh',
          drag: true,
          focus: 'top',
          perPage: 5,
          arrows: false,
          autoScroll: {
            speed: -0.1,
            pauseOnHover: false,
            pauseOnFocus: false,
          },
        }}
        onClick={(_slide, e) => {
          console.log(e);
        }}
        extensions={{ AutoScroll }}
      >
        <SplideSlide>
          <img src={cover1} alt="Image 1" onClick={() => handleImageClick(cover1)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover2} alt="Image 2" onClick={() => handleImageClick(cover2)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover3} alt="Image 3" onClick={() => handleImageClick(cover3)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover4} alt="Image 4" onClick={() => handleImageClick(cover4)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover5} alt="Image 5" onClick={() => handleImageClick(cover5)} />
        </SplideSlide>
      </Splide>
    </StyledBanner>
  );
}

export default Banner;