I am using react-material-ui-carousel.

It shows three items at a time. User can remove the item from the carousel. So, if on any of the slide e.g. third slide, there is only one item and user removes it then it should get moved to previous slide i.e. second slide. Following is the code:

const [cauroselIndex, setCauroselIndex] = React.useState<number>(0)
const [currentCauroselIndex, setCurrentCauroselIndex] = React.useState<number>(0)
  
React.useEffect(() => {
    if (user.role === USER_ROLES.hostUserRole) {
      if(groupArray[currentCauroselIndex]?.length===0 || groupArray[currentCauroselIndex]?.length===undefined){
        setCauroselIndex(currentCauroselIndex-1)
        setCurrentCauroselIndex(currentCauroselIndex - 1)
      }
    }
}, [currentCauroselIndex])
  
const handleCarouselChange = (now: any, previous: any) => {
    console.log(`OnChange User Callback: Now displaying child ${now}. Previously displayed child ${previous}`);
    setCurrentCauroselIndex(now); // Update the current index
}

And JSX is as follows:

<Carousel
    autoPlay={false}
    navButtonsAlwaysVisible={true}
    navButtonsAlwaysInvisible={isMobile}
    cycleNavigation={false}
    indicators={false}
    className="participants"
    NextIcon
    navButtonsWrapperProps={{ className: 'next-prev-btn' }}
    NavButton={({ onClick, style, next, prev }) => {
    return (
      <span onClick={(e) => onClick(e)} style={style}>
        <span>{next && <NavigateNextIcon />}</span>
        <span>{prev && <NavigateBeforeIcon />}</span>
      </span>
    )
    }}
    onChange={handleCarouselChange}
    index={cauroselIndex}
>

cauroselIndex gets updated and I am assigning the value to index in Carousel but slide doesn't move to previous slide.

Please help me to find out what I am doing wrong here.