I have a series of sliders in a page and I have a specific requirement that requires to add a padding to the slider when there are no items below its 0 index. I have this done already, but I can't figure out how to make this function affect only the slider that I am clicking in. Right now, it affects all the sliders in my map function.

I am using react-elastic-carousel and I am targeting specified props, so the functions look like this

const onPrevStart = (prevItemObject, nextItemObject) => {
  if (nextItemObject?.index === 0) {
    setFirst(true);
  }
};

const onNextStart = (prevItemObject, nextItemObject) => {
  if (nextItemObject?.index !== 0) {
    setFirst(false);
  }
};

then I am calling it in a my map function in the JSX like this

<div className="App">

  {items.map((item, index) => (
    <div 
      key={index} 
      className="carousel-wrapper" 
      style={{ backgroundColor: "maroon" }}>
      <div>
        <Carousel
          breakPoints={breakPoints}
          renderArrow={renderArrows} //see the codesandbox to see these
          onPrevStart={onPrevStart} //here
          onNextStart={onNextStart} //and here
          style={{ backgroundColor: "white" }}>

          {item.itemdata.map((slide, index) => (
            <Item key={index}>{slide}</Item>
          ))}

        </Carousel>
      </div>
    </div>
  ))}
</div>

If you look in my codesandbox that I've made for you to play around with, you can test the functionality and see what I mean.

Thank you in advanced