React Native Picker не остается вновь выбранной опцией

Question

У меня есть два выбора, чтобы выбрать язык перевода. Один из них для ввода, другой для вывода, чтобы изменить язык. Но у меня проблема со вторым средством выбора (средство выбора языка вывода). Я перетаскиваю вниз с первой опции на другие языковые опции, средство выбора немедленно возвращается к первой опции метки. Я хочу, чтобы селектор остановился на недавно выбранной опции. Первый сборщик не имеет проблемы.

import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, TouchableOpacity, Image, ScrollView } from 'react-native';
import {Picker} from '
@react-native-community
/picker'; 

var dil1 = 'tr';
var dil2 = 'en';


const Translator = () => {
var [selectedValue, setSelectedValue] = useState("dil1");
var [selectedValue1, setSelectedValue1] = useState("dil2");


const [inputText, setText] = useState('');
const [responseText, setResponse] = useState('');


function postTranslateService(text) {
fetch('https://translate.yandex.net/api/v1.5/tr.json/translate?key=='+ dil1 +'-'+ dil2 +'&text=' + text)
.then((res) => res.json())
.then((res) => {
console.log(res.text)
setResponse(res.text)
})
.catch((error) => {
console.log(error)
});
};



return (
<ScrollView
contentInsetAdjustmentBehavior="automatic">
      <View style = {styles.container}>
        <Text > </Text>
        <View style={styles.input}>
        <TextInput
          numberOfLines={5}
          multiline={true}
          placeholder="Metni Gir"
          style={{ height: 55, width: 275, borderColor: 'gray',  }}
          onChangeText={text => setText(text)}
        />
</View>


// FİRST PİCKER

<View style={styles.tpick}>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 125 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(dil1=itemValue)}
>
<Picker.Item label="Turkish" value="tr" />
<Picker.Item label="English" value="en" />
<Picker.Item label="Bulgarian" value="bg" />
<Picker.Item label="German" value="de" />
<Picker.Item label="French" value="fr" />
<Picker.Item label="Spanish" value="es" />
<Picker.Item label="Russian" value="ru" />
</Picker>
</View>


<View style={styles.tbutton}>
<Button
title="Translate"
color="#ff6600"
onPress={() => postTranslateService(inputText)}
/>
</View>
           <View style={styles.output}>
        <Text style = {styles.ceviri}>{' ' +responseText}</Text>
        </View>


// SECOND PİCKER


        <View style={styles.tpick}>
    <Picker
      selectedValue1={selectedValue1}
      style={{ height: 50, width: 125 }}
      onValueChange={(itemValue, itemIndex) => setSelectedValue1(dil2=itemValue)}
    >
      <Picker.Item label="Turkish" value="tr" />
      <Picker.Item label="English" value="en" />
      <Picker.Item label="Bulgarian" value="bg" />
        <Picker.Item label="German" value="de" />
        <Picker.Item label="French" value="fr" />
        <Picker.Item label="Spanish" value="es" />
        <Picker.Item label="Russian" value="ru" />
    </Picker>
  </View>      
  </View>      
      </ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
input: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderWidth: .6,
borderRadius: 5 ,
margin: 5,
  },
  output: {
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   borderWidth: .6,
   borderColor: 'gray',
   borderRadius: 5 ,
   margin: 5,
   height: 55,
   top:5,
      },
ceviri: {
fontSize: 15,
color: 'gray',
textAlign: 'center',
fontWeight: 'bold',
marginTop: 12,
},
tbutton: {
left:5,
width: 331,
borderRadius: 5,
marginTop: 7,
top:-75,
},
tpick: {
flex:1,
left:25,
bottom:140,
paddingTop: 40,
alignItems: "center"
},
});
export default Translator;