при использовании expo пользовательский ввод путем выбора раскрывающегося списка для модели автомобиля (фиктивные данные) не работает в приложении, но работает в веб-браузере

Question

Я использую TextInput, чтобы предложить пользователю ввести данные модели автомобиля, который им нужен, позволяя им выбрать элемент из раскрывающегося списка при нажатии на ввод текста модели, где выбранный элемент будет отображаться и регистрироваться в значении внутри текстового ввода. Функции работают в браузере, но НЕ в приложении, он не выбирает фиктивные данные, отображаемые в значении средства выбора, вот мой код ниже:

переменные и функции:

import React, {useState} from 'react';
import { StyleSheet, Modal, View, SafeAreaView, TextInput, TouchableOpacity, TouchableWithoutFeedback, Text, Keyboard, KeyboardAvoidingView, ImageBackground, FlatList} from 'react-native';
import {Picker} from '@react-native-community/picker';

import enterInfoBackGroundImage from './Images/EnterInfoImage.png';
import makeList from './Make.json'
import { TouchableHighlight } from 'react-native-gesture-handler';

export default function EnterInfoPage({navigation}) {
  
  const [state, setState] = useState ({
    make: '',
    model: '',
    year: '',
    transmission: '',
    engineCapacity: '',
    fuelType: '',
    mileage: '',
    showFlatListOne: false,
    showFlatListTwo: false,
    makeDataList: [],
    selectedPicker:'Model',
    showPicker:'false'
  })

  const modelPickerValues = [
    {
      make: 'Toyota',
      value: 'toyata',
      id: 1
    },
    {
      make: 'Toyota',
      value: 'toyata',
      id: 2
    },
    {
      make: 'Honda',
      value: 'honda',
      id: 3
    }
  ]

 const setPickerValue = (newValue) => {
     setState({
        selectedPicker: newValue
     }); 
  }

  const displayPicker = () => {
      setState({
        showPicker: !state.showPicker
      })
    };

  const onSearch = (text) => {
    const newData = makeList.filter(item => {  

      const itemData = item.make.toUpperCase();
      const textData = text.toUpperCase();  
      return itemData.indexOf(textData) > -1;   
    });

    setState({ 
      makeDataList: newData,
      showFlatListOne: true,
    });
  };

TextInput модели транспортного средства, при нажатии на него средство выбора должно быть видимым, позволяя пользователю выбрать одну из фиктивных данных modelPickerValues:

<TextInput style = {styles.inputText}
              placeholder = {state.selectedPicker}
              placeholderTextColor = {'#B2B2B2'}
              onChangeText = {text => setState({...state.selectedPicker })}
              value = {state.selectedPicker}
              onFocus = {() => {
                
                //setState({showFlatListTwo: true})
                displayPicker();
               
              }}

MODAL, используемый в качестве раскрывающегося меню выбора, становится видимым при нажатии на ввод текста модели, но он не позволяет пользователю выбрать одно из фиктивных данных из массива modelPickerValues:

<Modal visible= {state.showPicker} transparent={true}>
      <View style={{ margin: 20,
       width: 300,
       padding:20,
       backgroundColor: '#efefef',
       bottom:20,
       left:20,
       right: 20,
       alignItems: 'center',
       position: 'absolute' }} >

      <Text  style={{fontWeight: 'bold'}}  > pick a value: {state.selectedPicker}</Text>  
     
      {modelPickerValues.map((value,index) => {
        return <TouchableHighlight key= {index} onPress={() => setPickerValue(value.make) } style= {{paddingTop: 4, paddingBottom:4 }}>          
                    <Text> {value.make} </Text>
                </TouchableHighlight> 
      })}
      

      <TouchableHighlight style= {{paddingTop: 4,
                                  paddingBottom:4
                                
                                  }}>
        <Text onPress={() => displayPicker()}> cancel </Text>
      </TouchableHighlight> 
        
      </View>

    </Modal>