onChange firing when picker value not selected - reactjs

Question

I have a login form with conditional statements to display option lists, when a user selects a value from the first picker (Year), the picker below is displayed (Group), when a group is selected the third picker is displayed.
I have set functions to each pickers onChange.
This works fine until I start changing selected values. If I reselect a Year value from the first picker, this.onGroupChange is invoked on the second picker (Group).
Why is this invoked when that picker's value hasn't changed? How can I prevent firing when a previous value is changed?
class HomeScreen extends Component {
static navigationOptions = {
title: ""
};
constructor(props) {
super(props);
this.state = {};
this.onStudentChange = this.onStudentChange.bind(this);
this.onGroupChange = this.onGroupChange.bind(this);
this.onParentChange = this.onParentChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {}
onParentChange(e) {
const { setYear: year } = this.props.credentials;
this.props.dispatch(setYear(e));
}
onGroupChange(e) {
console.log(this.props);
const { setYear } = this.props.credentials;
const { categories } = this.props.categories;
if (e !== null) {
this.props.dispatch(setGroup(e, categories, setYear));
}
}
onStudentChange(e) {
if (e !== "") {
this.props.dispatch(setStudent(e));
}
}
onSubmit(e) {
this.props.navigation.navigate("Month");
}
render() {
const {
setYear,
setGroup,
setStudent,
showStudent
} = this.props.credentials;
const categories = this.props.categories;
const isLoading = this.props.isLoading;
if (isLoading || !categories) {
return (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#fff" />
</View>
);
}
return (
<View style={styles.container}>
<Image
source={require("../img/logoGreen.png")}
style={{ width: 300, height: 200 }}
/>
<View style={{ backgroundColor: "white" }}>
<Picker
selectedValue={setYear}
label="Year"
onChange={this.onParentChange}
options={categories}
/>
{setYear ? (
<Picker
selectedValue={setGroup}
label="Group"
// invoked when picker above is changed.
onChange={this.onGroupChange}
options={
categories.find(category => {
return category.id == setYear;
}).options
}
/>
) : null}
{setGroup && showStudent ? (
<Picker
selectedValue={setStudent}
label="Student"
onChange={this.onStudentChange}
options={
categories
.find(category => {
return category.id == setYear;
})
.options.find(category => {
return category.id == setGroup;
}).options
}
/>
) : null}
{(setYear && setGroup && !showStudent) || setStudent ? (
<TouchableHighlight
style={styles.button}
onPress={this.onSubmit}
>
<Text style={styles.buttonText}> Submit</Text>
</TouchableHighlight>
) : null}
</View>
</View>
);
}
}