Анимация бесконечного slider next js, как работать с классами в массиве объектов?

Question

HelpMeeee @HelpMeeee

React

Анимация бесконечного slider next js, как работать с классами в массиве объектов?

Изучаю Next.JS, занялся анимацией, есть пару вопросов, которые не могу решить. Задача сделать бесконечный не интерактивный слайдер иконок криптовалюты, бесконечность и анимацию прокрутки мне вроде бы удалось реализовать, но я думаю можно лучше. Застрял на добавлении класса первому элементу, первый элементы долежн быть выделен более ярким бекграундом и величиной иконки. Первый элемент должен анимировано скинуть класс main и уйти за предел видимости пользователя, а второй элемент должен стать анимировано на его место и получить класс main. Бесконечная прокрутка работает, а вот как реализовать добавление классов в pages я нигде не найду.

Так же есть вопрос по key, сыпет в консоль предупреждение, что кей не уникален в самом последнем return. Во-первых, я не пойму зачем там key, во-вторых, я не пойму как это пофиксить.
Еще очень интересует момент как выключить двойной вызов setTimeout в dev mode

import { StyledCardList, StyledSecondaryCard } from './styled'
    import React from "react";
    import { useState, useEffect } from "react";
    import cardDetails from "./swiperconfig"
         
    const TRANSITION_DURATION = 1500;
      
    export const Carousel = () => {
const [pages, setPages] = useState([])
const [offset, setOffset] = useState(0)
const [transitionDuration, setTransitionDuration] = useState(TRANSITION_DURATION)

const handleTransitionEnd = () => {
  setOffset(0);
  setTransitionDuration(0);
  console.log(offset)
}
useEffect(() => {
  if (transitionDuration === 0) {
    setTimeout(() => {
      setTransitionDuration(TRANSITION_DURATION)
    }, TRANSITION_DURATION)
  }
}, [transitionDuration])
useEffect(() => {
  setTimeout(() => {
    setOffset((currentOffset) => {
      const newOffset = currentOffset - 30;
      console.log(pages);
      pages[1] = () => {
        return(
          <StyledSecondaryCard key={cardDetails.id} className="card">
          <img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
          </StyledSecondaryCard>
        )
      }

      return (newOffset);
    })
  }, 5000)
  pages.push(pages[0]);
  pages.shift(pages[0]);
  if (offset != 0){
    setTimeout(() => {
      setTransitionDuration(0)
      setOffset(0)
    }, 15000)
  }
}
)

useEffect(() => {
  let curr = -1;
  setPages(
    cardDetails.map(() => {
      curr++;
      if (curr == 1){
        return (
          <StyledSecondaryCard key={cardDetails.id} className="card main">
          <img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
          </StyledSecondaryCard>
        )
      }
      else{
        return(
          <StyledSecondaryCard key={cardDetails.id} className="card">
            <img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
          </StyledSecondaryCard>
        )
      }
      })
  )
}, [])
// useEffect(() => {
// },[])
let data = new Date();

return (
  <div style={{maxWidth: '710px', overflow: 'hidden'}}>
      <StyledCardList key={offset * data} className="cardList" sx={{
        marginLeft: "-50px",
        transform: `translateX(${offset}px)`,
        transitionDuration: `${transitionDuration}ms`
      }} onTransitionEnd={handleTransitionEnd} onTransitionEndCapture={handleTransitionEnd}>
        {pages}
      </StyledCardList>
  </div>
)