Issue using imageIndex to show page indicator in header

[travisfalls]

I'm attempting to add a page indicator (for lack of a better term) to the header. Think something like "Photo 3 of 5." My current solution is working just fine except for one little bug. If you click on the image (Ex. index 0) to enter the full screen view, scroll through a few images (stop at index 3), close the full screen mode, and then click on the same image (index 0) it will show the index of the last image (index 3) that was showing before closing. Once you start swiping through images the imageIndex is updated and everything works fine. Seems that the imageIndex should be reset onCloseRequest. Any thoughts on how to work around this or if this is a bug?

HeaderComponent={({ imageIndex }) => (
  <PhotoPreviewHeader
     imageIndex={imageIndex}
     cameraName={previewCameraName}
     totalPhotos={previewPhotos.length}
     onRequestClose={() => setShowPhotoPreview(false)}
   />
 )}

const PhotoPreviewHeader = ({ imageIndex, cameraName, totalPhotos, onRequestClose }) => {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 112,
      }}
    >
      <Text
        fontStyle="Extra Bold"
        size={18}
        color={colors.neutral100}
        style={{ fontWeight: '800', lineHeight: 24 }}
      >
        {imageIndex + 1}/{totalPhotos} {cameraName}
      </Text>
      <TouchableOpacity onPress={onRequestClose}>
        <Close size={24} width={24} height={24} style={{ color: colors.neutral100 }} />
      </TouchableOpacity>
    </View>
  );
};

[travisfalls]

Turns out this may have been due to the index I was keeping in state. I ended up resetting the state index onRequestClose and it seems to work now.