Компонент выбора как headerRight возвращается к предыдущему значению в экспо

Question

Я пытаюсь интегрировать Picker в react-navigation заголовок.

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return {
      title:'title',
      headerRight: (
       <View>
                    {params && params.groups ?
                        <Picker
                            selectedValue={params.groupName}
                            style={{ height: 50, width: 200 }}
                            onValueChange={params.switch}>
                            {params.groups.map(group => {
                                return <Picker.Item key={group.id} label={group.name} value={group.id} />
                            })}
                        </Picker> : <Fragment></Fragment>}
                </View>
      ),
    };
  };

  componentWillMount() {
    const groups = [{id:1,name:"hello"},{id:2,name:"switch"}]
    this.props.navigation.setParams({ switch: this.switch , groups,groupName:groups[0].name });
  }

  switch = () => {
    const groups = [{id:1,name:"hello"},{id:2,name:"switch"}]
    this.props.navigation.setParams({ groupName:groups[1].name });
  };

Теперь при переключении на «переключение» с «привет» происходит переключение на полсекунды, а затем переключение на «привет». не могу понять, что я делаю не так здесь. Я также попытался использовать компонент Text вместо этого и нажать «привет» и переключить его на «переключение» без странного поведения