reactjs - タグのテキストを削除する際の予期しない動作

Question

私のプロジェクトでは、react-native-tagsを使用して、ユーザーからさまざまな色のバリエーションを取得しました。

コードは次のとおりです。

<View style={{ marginVertical: 10, marginLeft: 20, justifyContent: 'center' }}>
    <MText size={18}>Colors</MText>
</View>
<Tags
    initialText=""
    textInputProps={{
        placeholder: "Enter Color",
        blurOnSubmit:false
    }}
    initialTags={this.state.colors}
    createTagOnString={[","]}
    createTagOnReturn={true}
    onChangeTags={(tags) => {
        this.setState((prevState) => ({
            colors: tags
        }), () => this.handleVariantChanges());
    }}
    onTagPress={(index, tagLabel, event, deleted) => console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted")
    }
    containerStyle={styles.tagContainer}
    inputStyle={{ backgroundColor: "white" }}
    renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
        <TouchableOpacity style={styles.tag} onPress={onPress} key={index.toString()}>
            <Icon name="times" color="#aaa" />
            <MText>{' '}{tag}</MText>
        </TouchableOpacity>
    )}
/>

さて、プロジェクトを実行した後、いくつかのタグを追加しました。タグが正常に追加されました。次に、別のタグを追加し続けますが、スペルが正しくないため、最初の文字まで削除しましたが、以前のタグも自動的に削除されました。

別の問題は、いくつかのタグを追加した後にタグを削除したい場合、そのタグを削除できないことです。

ここに問題のgifがあります:

ここで何が問題なのか教えてください!!!

注: この問題は、状態値を .xml として使用した場合にのみ発生しますinitialTags。空の配列のままにしておくinitialTagsと、すべてが正常に機能します。