React Native DateTimePickerModal from "react-native-modal-datetime-picker" Not letting me add 2 DateTime picker in one component - react-native

Question

I need to add 2 DateTimePicker to my component in my React-native app. But only one work even if i add 2. I can open each datetimepicker but only one value change that is the top one. So can select bottom one and will only change the top value. See the code below
import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';
const Example = () => {
const [selectedDate, setSelectedDate] = useState();
const [selectedDate1, setSelectedDate1] = useState();
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const handleConfirm = (date) => {
setSelectedDate(date);
hideDatePicker();
};
const handleConfirm1 = (date) => {
setSelectedDate1(date);
hideDatePicker();
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{`Date: ${selectedDate? moment(selectedDate).format("MM/DD/YYYY"):"Please select date"}`}</Text>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirm}
onCancel={hideDatePicker}
/>
<Text>{`Date: ${selectedDate1? moment(selectedDate1).format("MM/DD/YYYY"):"Please select date"}`}</Text>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirm1}
onCancel={hideDatePicker}
/>
</View>
);
};
export default Example;
So I am wondering if it is even possible to add 2 DateTimePicker into one component?

Answer 1

It looks like there is only 1 state handling the opening of the pickers which is causing the first to open each time
const [isDatePickerVisibleOne, setDatePickerVisibilityOne] = useState(false)
const [isDatePickerVisibleTwo, setDatePickerVisibilityTwo] = useState(false)