Capture onChange event from inputComponent passed to OutlinedInput, Material UI - reactjs

Question

I'm trying to use OutlinedInput with KeyboardDatePicker, both from Material UI. I'm passing a DatePicker as input component to 'OutlinedInput' component of Material UI. I want to know how to get date from the inputComponent I'm passing.
With the following code I'm getting "_onChange is not a function" error.
const handleInputChange = (event) => {
if (event.target.name === "deliveryDate") {
temp.deliveryDate = event.target.value;
}
}
function datepicker() {
return <MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
name="deliveryDate"
format="MM/dd/yyyy"
value={projectDetails.deliveryDate}
onChange={props.handleInputChange} /> //not sure if this is how I should write it
</MuiPickersUtilsProvider>;
}
return(
<OutlinedTextBox
name="deliveryDate"
id="deliveryDate"
maxlength={20}
onChange={handleInputChange}
inputComponent = {datepicker} //passing the KeyboardDatePicker as input component
inputLabel="Delivery Date" />
)
Below is my OutlinedTextBox component. It returns
<OutlinedInput
name={props.name}
inputProps={{
maxLength: props.maxlength?props.maxlength:100,
}}
onChange={props.handleInputChange}
{...props}
/>
How to capture onChange function of inputComponent attribute.

Answer 1

Update
From what you said in your comment, all you actually have to do then is edit your datepicker component. You dont need to pass in the value, onChange or name directly as those are already being passed in as props from when you use inputComponent={datepicker}. So all you need to do is declare the props and spread them all into the KeyboardDatePicker.
const DatePicker = (props) => {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
format="MM/dd/yyyy"
{...props}
/>
</MuiPickersUtilsProvider>
);
};
Original Answer.
You could just add the inputVariant="outlined"property to the KeyboardDatePicker as that will make it outlined. Then you dont actually need to use the OutlinedInput component at all.
<KeyboardDatePicker
name="deliveryDate"
format="MM/dd/yyyy"
value={projectDetails.deliveryDate}
onChange={props.handleInputChange}
inputVariant="outlined
/>