pagination__page is-active not working?

[mozila80]

Hello, im using NextJS13 and Splide4

When i try to customize my pagination and pagination__page, everything is fine,
but the problem is my custom pagination__page .is-active is not working

is-active should be red, but its not

here my view

import Image from "next/image";
import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import styles from "./home.splide.module.css";

const SplideBanner = () => {
  const SplideLabel = "Home Banner";
  const SplideOptions = {
    autoplay: true,
    gap: "1rem",
    interval: 5000,
    pagination: true,
    rewind: false,
    breakpoints: {
      768: {
        gap: "0.5rem",
      },
      1024: {
        gap: "1rem",
      },
    },
    classes: {
      pagination: ["splide__pagination", styles.pagination].join(" "),
      page: ["splide__pagination__page", styles["pagination__page"]].join(" "),
    },
  };

  return (
    <Splide
      aria-label={SplideLabel}
      className={styles.splide__home}
      hasTrack={false}
      options={SplideOptions}
    >
      <SplideTrack className={styles.home__track}>
        <SplideSlide className={styles.track__slide}>
          <Image
            className={styles.slide__image}
            src="/images/01.jpg"
            alt="Image 1"
            fill
            style={{ objectFit: "cover" }}
          />
        </SplideSlide>
        <SplideSlide>
          <Image
            className={styles.slide__image}
            src="/images/02.jpg"
            alt="Image 2"
            fill
            style={{ objectFit: "cover" }}
          />
        </SplideSlide>
      </SplideTrack>
    </Splide>
  );
};

export default SplideBanner;

here my module css

.splide__home {
  position: relative;
  border-radius: 15px;
  width: 100%;
}
.home__track {
  border-radius: 15px;
}
.track__slide {
  position: relative;
  height: 512px;
}
.slide__image {
  border-radius: 15px;
}

.pagination {
  bottom: -25px;
  right: unset;
}
.pagination__page {
  border-radius: 12px 12px;
  height: 10px;
  width: 10px;
}
.pagination__page.is-active {
  background: #ff0000;
  width: 100px;
  transform: unset;
  opacity: 0.8;
}