Kendo React Grid: How to customize the column menu filter specifically for date and its filtering

I have a component with a few columns. One of them is a date column. Now, I want to filter that column from the column menu filter but I'm unable to customize it. I want the filter to have a custom format like MM/dd/yy or dd/MM/yy (both placeholder and value) as per my locales. Can anybody guide me on how to do this? As the generic column filter menu is giving me month/day/year (placeholder) and same date format. Posting some bit of the code here.

Component.jsx

import { Grid } from '@progress/kendo-react-grid';
import { GridColumnMenuFilter } from '@progress/kendo-react-grid';

<Grid useColumnFilterMenu>
    <Column
        field="joinDate"
        title={locale('joinDateTitle')}
        format={`{0:${locale('joinDateFormat')}}`}
        filter="date"
        columnMenu={props => {
            <GridColumnMenuFilter {...props} />
        }
     />
....
....
</Grid>

Here, joinDateFormat - is the MM/dd/yy or dd/MM/yy format. This is showing me the results from the API call perfectly fine. But I'm struggling with the column filter and its placeholder and date format as per my locale changes.

We can use the filterUI prop of the GridColumnMenuFilter and achieve this.