Почему при нажатии окно выбора времени вызывается несколько раз подряд? При нажатии на "отмена" то же самое. И почему вместо 01:00 выводит 1:0

    import React, {useState} from 'react';
import {View, TouchableOpacity, Platform, Text, Button} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App(){
  const [date, setDate] = useState(new Date())
  const [mode, setMode] = useState('date')
  const [show, setShow] = useState(false)
  const [text, setText] = useState(' 00:00 ')

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);

    let tempDate = new Date(currentDate)
    let fTime = tempDate.getHours() + ":" + tempDate.getMinutes()
    setText(' ' + fTime + ' ')
  }

  const showMode = (currentMode) => {
    setShow(true)
    setMode(currentMode)
  }

  return(
    <View>
      <TouchableOpacity onPress={() => showMode('time')}>
        <Text style = {{backgroundColor:'white', color:'black', borderRadius: 12, fontSize:15, fontWeight:'600'}}>{text}</Text>
        {show && (
          <DateTimePicker
            testID="dateTimePicker"
            value={date}
            mode={mode}
            is24Hour={true}
            display="default"
            onChange={onChange}
          />
        )}
      </TouchableOpacity>
   
    </View>
  );
}

это код отдельного компонента, он вызывается при добавлении элемента в модальном окне