React Native Modal Date Picker - why am I getting an extra window?

My React Native app (iOS) is using the React Native Modal Datetime Picker package. I have a button which, when clicked, should open the calendar so that I can pick a date.

However, when I click the button, I get the following modal window:

If I then click on the date in that window, I see the calendar:

I want the calendar to appear when I click the button initially.

Here's the relevant code:

  const [isDatePickerVisible, setIsDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setIsDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisibility(false);
  };

  return (
    <View>
      <Text style={styles.inputTitle}>DATE OF BIRTH</Text>
      <View style={styles.dateInput}>
        <TextInput
           editable={false}
           style={styles.input}
           value={dateOfBirth}
        />
        <Button transparent onPress={showDatePicker}>
          <Icon
            type="FontAwesome5"
            name={'calendar-alt'}
          />
        </Button>
        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="date"
          onConfirm={handleDateSelection}
          onCancel={hideDatePicker}
        />
      </View>
    </View>
  )

Has anyone else seen this behaviour? Or can anyone suggest what I can do about it?