1st index hidden Item not hidding when swiping the another element

[Aaketk17]

as you can see in the image, I have implemented adding Text inputs dynamically with the button press, everything is working perfectly only the 1st text input hidden item (Remove Button) not hiding when swiping the other text inputs.

const initialState = {
  col1: '',
  key: 0,
};
const [inputField, setInputField] = useState<Values[]>([initialState]);

<SwipeListView
            data={inputField}
            renderItem={data => renderItem(data)}
            renderHiddenItem={data => renderHiddenItem(data)}
            leftOpenValue={55}
            rightOpenValue={-100}
            disableRightSwipe={true}
            ListHeaderComponent={
              <View style={[styles.headingContainer]}>
                <Text style={[styles.headingText]}>{Props.inputHeading}</Text>
              </View>
            }
            ListFooterComponent={
              <View style={styles.buttonContainer}>
                <TouchableOpacity
                  style={styles.addBtn}
                  activeOpacity={0.7}
                  onPress={onPressAddBtn}>
                  <Text style={styles.BtnText}>Add</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.submitBtn} activeOpacity={0.7}>
                  <Text style={styles.BtnText}>Submit</Text>
                </TouchableOpacity>
              </View>
            }
            style={{height: Dimensions.get('screen').height / 1.3}}
          />

const renderItem = (data: any) => {
    console.log(data, 'ttttttttttttttttttttttt');
    return (
      <TouchableHighlight key={data.item.key}>
        <TextInput
          placeholder="Hello"
          onChangeText={e => handleChange(data.item.key, 'col1', e)}
          value={data.item.col1}
          style={[styles.textInput, Props.textInputStyle]}
          // {...Props.textInputProps}
        />
      </TouchableHighlight>
    );
  };

  const renderHiddenItem = (rowData: any) => {
    return (
      <View
        style={{
          justifyContent: 'flex-end',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <TouchableOpacity
          activeOpacity={0.7}
          style={{
            backgroundColor: 'red',
            justifyContent: 'center',
            flexDirection: 'row',
            width: 90,
            height: 45,
            alignItems: 'center',
            borderRadius: 5,
          }}>
          <Text style={{color: 'white'}}>Remove</Text>
        </TouchableOpacity>
      </View>
    );
  };

but other all element's swipe is working as expected only the first element is not working as expected

[Aaketk17]

found solution by adding keyExtractor={item => item.key.toString()} to swiper flatlist.