drag and drop fails on adding new items about react-native-sortable-grid HOT 2 OPEN

render item drag and drop
<SortableGrid
key={"sortableGrid"}
style={{ margin: 10,flex:1}}
itemsPerRow={3}
dragActivationTreshold={100}
ref={'SortableGrid'}
dragStartAnimation={this.getDragStartAnimation()}
onDragRelease={(item, index) => this.onDragRelease(item, index)}
onDragStart={() => this.startCustomAnimation()}
>
{
this.state.media.map((item, index) => {
return (
item !== "empty"
?
<View style={{ height: 106, width: 106, alignSelf: "center" }} key={unique-key-${index}}>
<Image source={{ uri: item.image_id === "" ? item.thumbnail : item.image }} style={{
width: 100,
height: 100,
borderRadius: 20,
alignSelf: "center",
borderColor: '#ababab',
borderWidth: 2
}} />
<TouchableOpacity style={[styles.Indicator, { borderWidth: 1, borderColor: "#ababab", borderRadius: 10, backgroundColor: "#FFF" }]} onPress={() => this.removeMedia({ item, index })}>
<Image source={require("../../assets/images/error.png")} style={{ height: 20, width: 20, alignSelf: "center", }} resizeMode="contain" />

:
<TouchableOpacity onPress={() => this.getImageOrVideo(index)} key={key-${index}} inactive={true}>
<View style={[styles.cellEmptyImg, { alignSelf: "center" },]}>
<Image source={require("../../assets/images/button.png")} style={{ height: 50, width: 50, }} resizeMode="cover" />
add photo


)
})
}

from react-native-sortable-grid.

create array for sortable list.
for (var i = 0; i < 6; i++) {
if (res.Results[i] !== null && res.Results[i] !== "" && res.Results[i] !== undefined) {
let count = 1
this.setState({ count: count })
data.push(res.Results[i])
tempData.push(res.Results[i])
} else {
data.push("empty")
}
if (this.state.count === 1) {
this.setState({ disabled: false }, () => console.log(this.state.disabled))
}
}
this.setState({ media: data, loading: false, tempImageArray: tempData }, () => console.log("verified photos =====>", this.state.media))

from react-native-sortable-grid.