[Help needed] Rerender different sets of children

[Maxime Crampon]

How can I manage to rerender different sets of children when they change?
In my project I can render set 1 of my data, then set 2 renders perfectly, but when my data change again to set 1 (or any set that has previously been rendered) it does not render again.

In this minimal snack, I do not understand why I have to use the key prop to be able to change rendering between the two example sets. But here it does render both sets in a loop. What could be different in my project?

Snack:
https://snack.expo.dev/@maximec/web-swiper-rerender

Use of library in my project:

children come from a hook, passed to a wrapper component then to Swiper

    <Swiper
      onIndexChanged={onIndexChanged}
      minDistanceForAction={0.1}
      containerStyle={styles.swiperContainer}
      innerContainerStyle={{ overflow: "visible" }}
      children={children}
      controlsProps={{
        dotsTouchable: false,
        prevPos: false,
        nextPos: false,
        dotsPos: dotsPosition,
        DotComponent: ({ index }) => (
          <DotComponent
            position={dotsPosition}
            color={getDotColorFromComponentPosition()}
            index={index}
            activeIndex={activeIndex}
            size={sizes[index]}
          />
        ),
      }}
    />

[D.H. Luong]

This is because the Swiper component made an internal copy of the children prop, so it does not have the auto re-render of react when children updates. By using the "key" prop makes the whole component re-mount, so the children is copied again.