onValueChange is not working on Dynamically added pickers react-native

How to / Third Party Tooling
1

picker is not setting selected value onValueChange

//to add picker dynamically
addCordRow = () => {
let index = this.state.cropLength;
index = index + 1;
let newCrop = ‘crop’ + index;

    let elem = (
        <Card key={'card' + index}>
                <View style={{flex: .5, flexDirection: "column"}}>
                    <Picker key={ 'crop' + index}
                            style={{borderWidth: 2, borderColor: "black"}}
                            mode="dropdown"
                            selectedValue={this.state.selectedCropValue[index]}
                            onValueChange={(itemValue, itemIndex) => this.onCropSelect(itemValue, index, 'crop' + index)}>
                        <Picker.Item color="#655093" key="0" value="0" label="Select"></Picker.Item>
                        <Picker.Item color="#655093" key="1" value="WHEAT" label="Wheat"></Picker.Item>
                        <Picker.Item color="#655093" key="2" value="PADDY" label="Paddy"></Picker.Item>
                       
                    </Picker>
                </View>
        </Card>
    );

    this.setState({
        cropViewArray: [...this.state.cropViewArray, elem],
        cropLength: this.state.cropLength + 1,
    });
}

//on change
onCropSelect = (value, index, id) =>{
console.log(value + " " + index + " " + id);
console.log(">>> " + this.state.selectedCropValue);
let tmpArr = this.state.selectedCropValue;

    console.log(tmpArr);
    tmpArr[index] = value;
    console.log(" start > " + this.state.selectedCropValue);
    this.setState({
        selectedCropValue: tmpArr
    });

}