Encountered two children with same key

Question

there is the error: Encountered two children with the same key

if i use only one "FlatImages" component, then everything works as it should, but

if I duplicate "FlatImages" component then while sliding one image component, another image component indicator slides.

const FlatImages = ({imageSource}) => {
  const [imgActive, setimgActive] = useState(0);
  onChange = nativeEvent => {
    if (nativeEvent) {
      const slide = Math.ceil(
        nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width,
      );
      if (slide !== imgActive) {
        setimgActive(slide);
      }
    }
  };
  return (
    <>
      <FlatList
        horizontal
        pagingEnabled
        onScroll={({nativeEvent}) => onChange(nativeEvent)}
        showsHorizontalScrollIndicator={false}
        data={DATA}
        style={styles.wrap}
        keyExtractor={item => item.name}
        renderItem={({item}) => {
          return <Images imageSource={item.image} />;
        }}
      />
      <View style={styles.wrapDot}>
        {DATA.map((e, index) => (
          <Text
            key={e}
            style={imgActive === index ? styles.dotActive : styles.dot}>
            ⬤
          </Text>
        ))}
      </View>
    </>
  );
};
const Images = ({imageSource}) => {
  console.log(imageSource);
  return (
    <View style={styles.imageContainer}>
      <Image source={imageSource} style={styles.image} />
    </View>
  );
};