Change the style KeyboardDatePicker Material UI component

I was using Material UI components for creating a React Js app.

First, I wanted to change the width and height of KeyboardDatePicker from Material UI component.

Here was the first condition:

and here was the code for the start and end date pickers:

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
        />
    </MuiPickersUtilsProvider>
</div>
<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="End Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={endDate}
            onChange={changeEndDate}
        />
    </MuiPickersUtilsProvider>
</div>

Then I tried to change the width and height of both date pickers by adding InputProps and style prop to both date pickers:

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
            InputProps={{
                style: {
                    fontSize: 14,
                    height: 44
                }
            }}
            style={{
                width: 232
            }}
        />
    </MuiPickersUtilsProvider>
</div>
<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="End Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={endDate}
            onChange={changeEndDate}
            InputProps={{
                style: {
                    fontSize: 14,
                    height: 44
                }
            }}
            style={{
                width: 232
            }}
        />
    </MuiPickersUtilsProvider>
</div>

and here was the result:

As we can see that the position of the label/hint text was not centerized vertically.

So how could I change the style of for this date picker?

These were the properties I wanted:

1. Width: 246 px
2. Height: 44 px
3. The label/hint text is centerized vertically