handle currentIndex inside renderItem

Question

I need to access to currentIndex inside renderItem to know if the current displayed item isFocus.

For the moment, I handle the index change with onSnapToItem with :

  const [carouselIndex, setIndex] = React.useState(initialIndex);
  const refCarousel = React.useRef(null);

  const handleIndexChange = (index: number) => {
    setIndex(index);
  };

 <Carousel
        data={productList}
        ref={refCarousel}
        style={fillContainer}
        sliderWidth={width}
        itemWidth={width}
        firstItem={initialIndex}
        onBeforeSnapToItem={handleIndexChange}
        keyboardShouldPersistTaps="always"
        renderItem={({ item, index }) => {
          return (
            <InventoryProductSheet
              key={item.id}
              productId={item.id}
              index={index}
              isFocused={index === carouselIndex}

            />
          );
        }}
      />

But there is some bug with hooks and react-native-snap-carousel (https://github.com/archriss/react-native-snap-carousel/issues/559)

i have tried refCarousel.current.currentIndex but its doesn't trigger rerender :/

There is a better way to handle currentIndex inside renderItem ?

Start by tracing the Carousel renderItem callback, onBeforeSnapToItem, and the refCarousel.current.currentIndex behavior described in the issue. Determine whether the component can expose a rerender-safe current index to renderItem, and define done as reliably identifying the focused item without the reported hooks issue.