Display a view when another view is being focused? - react-native

Question

I have a TextInput, when the text is onFocus, I want to display a DateTimePicker component.
I have a AddMeeting.js component, which contains the TextInput, and another component for the DateTimePicker itself.
I thought about having a state (boolean) in AddMeeting that would change when TextInput is getting onFocus / onBlur and with conditional rendering to display / dismiss the DateTimePicker from the screen.
the problem is, I already have a show and hide functions in the DateTimePicker component itself, and it seems redundant to have the state in AddMeeting too.
This is the DateimePicker:
import React, { useState } from "react";
import { View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
const CustomDateTimePicker = () => {
const [isPickerVisible, setPickerVisibility] = useState(false);
const [chosenDate, setChosenDate] = useState("");
const showPicker = () => {
setPickerVisibility(true);
};
const hidePicker = () => {
setPickerVisibility(false);
};
const handleConfirm = (date) => {
setChosenDate = date
console.warn("A date has been picked: ", date);
hidePicker();
}
return (
<View>
<DateTimePickerModal
isVisible={isPickerVisible}
mode="datetime"
onConfirm={handleConfirm}
onCancel={hidePicker}
/>
</View>
)
}
export default CustomDateTimePicker;
This is the AddMeeting.js:
const AddMeetingScreen = ({ navigation }) => {
_popAddMeeting = () => {
navigation.pop()
}
_showPicker = () => {
console.log("SHOWING PICKER");
}
return (
<>
<SafeAreaView style={styles.addMeetingContainer}>
<View style={styles.headerContainer}>
<TouchableOpacity onPress={_popAddMeeting} style={styles.backButtonTouchable}>
<Icon name="arrow-back-outline" size={28} color="#000" />
</TouchableOpacity>
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>
New Meeting
</Text>
</View>
</View>
<View style={{ marginTop: 32 }}>
<MinimalTextInput title="When" placeholder="test" onFocus={_showPicker} />
</View>
</SafeAreaView>
</>
)
}
}