Work around for react-native-datepicker TouchableComponent not working

DatePickerField.js

import React, { Fragment, useRef } from 'react'
import DatePicker from 'react-native-datepicker';
import { TextField, FilledTextField, OutlinedTextField, } from 'react-native-material-textfield';

export default function DatePickerField({ label, onBlur, error, onChange, value, style, textFieldProps, datePickerProps, ...props }) {
  let dateTextFieldRef = useRef(null);
  let datePickerRef = useRef(null);
  const triggerDatePickerClick = () => {
    datePickerRef.onPressDate();
  }
  return (
    <Fragment>
      <OutlinedTextField
        ref={(ref) => dateTextFieldRef = ref}
        labelFontSize={16}
        spellCheck={true} multiline={false}
        onFocus={triggerDatePickerClick}
        value={value}
        label={label}
        onBlur={onBlur}
        editable={true}
        keyboardType="default"
        error={error}
        style={style}
        {...textFieldProps}
      />
      <DatePicker
        style={{
          opacity: 0.0, height: 0, width: 0, fontSize: 0, backgroundColor: "transparent",
          borderWidth: 0, marginBottom: 0, marginRight: 0
        }}
        ref={(ref) => datePickerRef = ref}
        date={value}
        mode="date"
        format="YYYY-MM-DD"
        minDate="01-01-2018"
        // maxDate={maxDate}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        onDateChange={(...params) => {
          onChange.apply(null, params);
          dateTextFieldRef.setValue(params[0]);
        }}
        {...datePickerProps}
      />
    </Fragment>
  )
}

usage

<DatePickerField
    value={this.state.date}
    label='Date'
    onBlur={this.onDateBlur}
    error={this.state.error.date}
    onChange={this.onDateChange}
/>}