I have a problem with Carousel which is implemented like this:

<Carousel
          key={3}
          sliderWidth={device.windowWidth}
          sliderHeight={device.windowHeight}
          activeSlideAlignment="start"
          itemWidth={device.windowWidth-20}
          data={picklistItems}
          firstItem={props.selectedPinkItemIndex ? props.selectedPinkItemIndex : 0}
          scrollEnabled={true}
          pointerEvents={'none'}
          lockScrollWhileSnapping

the problem which I'm facing is that firstItem 'doesn't see' that the state (props.selectedPinkItemIndex) updates - when I console.log the props.selectedPinkItemIndex, it is a few times 0, and then it updates to for example 8, but the Carousel kinda doesn't see that the state updated and I'm always stuck at 0. Obviously if I make firstItem={8} it propely shows the 8th item, but dynamically, it doesn't work.

The selectedPinkItemIndex is set in parent's component like this:

const [initialPicklistItemIndex, setInitialPicklistItemIndex] = useState<number>(0);

and then passed to carousel's component like this:

selectedPinkItemIndex={initialPicklistItemIndex}