How to customize Splide js arrows with React?

i need to simply customize arrows to this enter image description here but i cant find a way to do it in react.

As it seems to me, the main problem is that I can’t define classes for arrows.

i tried this:

        <Splide options={{type: 'Loop', perPage: 5, perMove: 1, gap: 30,
          classes: {
            arrows: 'splide__arrows', 'arrow': 'splide__arrow',
            prev: 'splide__arrow splide__arrow--prev back', next: 'splide__arrow splide__arrow--next next',}
        }} >

here is my code now

import React from "react";
import "./Popular.css";
import { Splide, SplideSlide, SplideTrack } from "@splidejs/react-splide";
import "@splidejs/splide/css";
import { PopularData } from "./PopularData";

export default function Popular() {
  return (
    <div className="popular-root">
      <div className="popular-container wide-wrap">
        <div className="popular-title">
          <h1>Popular now</h1>

          <a href="#" className="popular-title-catalog">
            <p>Catalog</p>

            <svg>
            </svg>
          </a>
        </div>

        <Splide options={{ type: "Loop", perPage: 5, perMove: 1, gap: 30 }}>
          {PopularData.map((item, index) => (
            <SplideSlide key={index} className="popular-slide">
              <div className="slide-container">
                <div className="popular-image-container">
                  <img src={item.image} alt="" />
                  <svg> 
                  </svg>
                </div>

                <div className="popular-price-w-shopping-btn">
                  <h2>{item.price} ₽</h2>
                  <svg>
                  </svg>
                </div>

                <div className="popular-cloth-names">
                  <p>{item.title}</p>
                  <p>{item.description}</p>
                  <p>{item.sizes}</p>
                </div>
              </div>
            </SplideSlide>
          ))}
        </Splide>
      </div>
    </div>
  );
}