Cannot update a component (RingComponent) while rendering a different component (wrappedCard)

[AudouxH]

Hi everyone,

I develop a pwa and i meet a problem with the prev and next function from carousel, i have this issue when i call them.

I declare my carousel like that :

const CarouselRef = useRef<any>({
    next: () => null,
    prev: () => null,
  });

i use prev and next like that :

const snapSelectedMember = () => {
    if (!selectedMember) return;
    const index = ordersMembers.findIndex(member => member.id === selectedMember.id) || 0;
    if(index === -1) return;
if (index < currentIndex) {
      for (let i = index; i <= currentIndex; i++) { CarouselRef.current.prev(); }
    } else {
      for (let i = currentIndex; i <= index; i++) { CarouselRef.current.next(); }
    }
    setCurrentIndex(index);
};

and this is my touch carousel :

        ref={CarouselRef}
        component={CarouselContainer}
        cardCount={ordersMembers?.length}
        renderCard={(index: number, modIndex: any, cursor: number, carouselState: any) => RenderCard({ index, modIndex, cursor, carouselState, item: ordersMembers[modIndex], currentIndex, onIndexChange })}
        defaultCursor={currentIndex}
        onDragStart={() => setDisableDraging(true)}
        onDragEnd={() => setDisableDraging(false)}
        onDragCancel={() => setDisableDraging(false)}
        loop={false}
      />

Do you have any idea where come from my issue ?