How to customize SplideJS pagination

Question

I am trying to integrate SplideJS (https://splidejs.com/) to my react application.

The integration part is done. What i need to do is to customize the pagination which i am unable to do or dont really understand how i am supposed to do it.

From the docs i understand that i can customize the Splide instance with a few methods

1. Javascript method (which i would like to use as its the simplest one)
2. data-attribute method I am using this one where i am using the component, you can see the data-splide attribute. But its to hard to use when trying to customize the pagination, the javascript method seems cleaner.

I tried to use arrows:false in my javascript method but nothing works there. The docs says that it should be done like this:

new Splide( '.splide', {
  classes: {
        pagination: 'splide__pagination your-class-pagination',
        page      : 'splide__pagination__page your-class-page',
  },
} );

When using that method it does not affect any options at all. Although i am not sure this is the correct way to customize the dots (i need to add some simple css only)

This is the code i am using:

import React from "react";
import {fetchData} from "../../services/fetchData";
import CarBlock from './CarBlock';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';
import styles from "./styles1.module.css";

export const CarListPage: React.FC = () => {

    new Splide( '.splide', {
        classes: {
              pagination: 'splide__pagination iamtestingthis',
        },
      } );

    const data = fetchData();
    // data:any need to fix that :)
    const CarBlocks: JSX.Element[] = data!.map((data: any, index: number) => {
        return <CarBlock 
                    key={index} 
                    bodyType={data.bodyType} 
                    id={data.id} 
                    imageUrl={data.imageUrl} 
                    modelName={data.modelName} 
                    modelType={data.modelType}
                ></CarBlock>
      });
    return (
        <div>
            <h1>Volvo Car Rental</h1>
            {/* {CarBlocks} */}
            <Splide aria-label="My Favorite Images" data-splide='{"arrows":false}'>
            {CarBlocks.map((item, index) => (
                <SplideSlide key={index}>
                    {item}
                </SplideSlide>
            ))}
            </Splide>
        </div>
    );
}

If you need me to add anything just let me know.

I tried using the javascript method. But none of my options work there