I am creating a custom carousel with hooks. my question is how do I switch multiple classnames on the div elements?

I have built a carousel in vanilla js & CSS before and you start with 5 class names on different elements:
<div class="back-pos";
<div class="left-pos";
<div class="front-pos";
<div class="right-pos";
<div class="back-pos";

these classnames should define a carousel like styling with keyframes which I already have from my previous carousel in vanilla JS.

Now how do I switch these clasenames clockwise or counter-clockwise in react with the data that is fetched? I have built a button component where the onclick is handled to switch these classes right(clockwise), left(counterclockwise)

export default function Carousel() {
    const [data, setData] = useState(null)
    const [isLoading, setLoading] = useState(false)

    useEffect(() => {
      setLoading(true)
      fetch('api/projects')
        .then((res) => res.json())
        .then((data) => {
          setData(data)
          setLoading(false)
        })
    }, [])

    if (isLoading) return <p>Loading...</p>
    if (!data) return <p>No projects available</p>
   
    console.log(data); // this is the data that I want to loop over

    const slides = [
       "slide1",
       "slide2",
       "slide3",
    ]
  
  const [currentSlide, setCurrentSlide] = useState(0)
  console.log(currentSlide);
  
  const prev = () => {
    const index = currentSlide > 0 ? currentSlide -1 : slides.length -1
    setCurrentSlide(index)
    console.log(setCurrentSlide); 
  }

  const next = () => {
    const index = currentSlide < slides.length -1 ? currentSlide + 1 : 0
    setCurrentSlide(index)
    console.log(setCurrentSlide);
  }

return (
   <div className="carousel">
      { 
         data.projects.map((project) => {
            return (
               <li key={project.id} className={styles.carousel_item}>
                   <h3>{project.title}</h3>
                   <li className={`${styles.back-pos}`}>
                       <Link href={`/projects/${project.slug}`}>{project.title}</Link> 
                   </li>
                   <li className={`${styles.left-pos}`}>
                       <Link href={`/projects/${project.slug}`}>{project.title}</Link> 
                   </li>
                   <li className={`${styles.front-pos}`}>
                       <Link href={`/projects/${project.slug}`}>{project.title}</Link> 
                   </li>
                   <li className={`${styles.right-pos}`}>
                       <Link href={`/projects/${project.slug}`}>{project.title}</Link> 
                   </li>
                   <li className={`${styles.back-pos}`}>
                       <Link href={`/projects/${project.slug}`}>{project.title}</Link> 
                   </li>
               </li>
               )
            })
         }

)

as you can see I .map though my data, but I know that this is not the way to achieve my goal. the slides variable needs to use the data from my database but now uses static array data what I want to replace with the fetched data. also in this current setup the $slides variable is not connected to the data. slides.length() is being called but when I change the fetched data and change the name to slides it doesn't work obviously.

Does anyone know the solution where the count of the slide is connected to the div:classname that would be added to the react/html element?

iI have been stuck with this for a little while and just cant figure a way out to fix this. I am open to suggestions and tip or tricks. I hope this explanation is any way good to understand the problem and the goal. thank you in advance.

this is my data json output from db: