I suggest using a custom place holder and conditional rendering. Kendo uses classes to get the style of a floating label, the nested span will achieve that. I have added the code snippet I tried, but since I am not familiar with React, I could not get the conditional rendering to work.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { dataProducts, dataCategories, dataOrders } from './data';
import { DateInput, Calendar, DatePicker, TimePicker, MultiViewCalendar, DateRangePicker } from '@progress/kendo-react-dateinputs';
class App extends React.Component {
    render() {
      const isFocused = false;
        return (
            <div>
                <div>
                    <p>DatePicker</p>                    
                    {isFocused
                     ?  <span class="k-textbox-container k-state-focused k-state-empty"><span class="k-label">Select Order Date</span></span>
                     : null}

                    <div onFocus = {this.onFocusDatePickerInput} onBlur = {this.onBlurDatePickerInput} >
                        <DatePicker format="MM dd yyyy" formatPlaceholder={{ year: 'Date', month: 'Select', day: 'Order' }} 
                                    onChange={this.changeDate} />
                    </div>
                </div>
            </div>
        );
    }

    changeDate = (event) => {
      console.log(event.value)
       if(event.value){
        this.format= "MM/dd/yyyy";
        this.setState({ value: event.value });
        }
    }

    onFocusDatePickerInput = () => 
    {
      this.isFocused = true;
      console.log(this.isFocused)
    }

    onBlurDatePickerInput = () => 
    {
      this.isFocused = false;
      console.log(this.isFocused)
    }

}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

• Just provide the initial value of date as null (in your state) then it will work the way you expected.
• Also you can use emptyLabel prop to provide custom placeholder when date is null

see demo in codesandbox here

code

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label="Date of Birth"
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        //  InputProps={{ className: css.datepicker }}
      />
    </MuiPickersUtilsProvider>
  );
}

Edit: answering follow-up qns based on comment.

1. Remove the floating label when date is null - provide value to label when dob has a value

label={dob && "Date of Birth"}

2. Apply styles for Empty label - Use makeStyles and InputProps

const useStyles = makeStyles(theme => ({
  datepicker: {
    margin: "2px 0px 2px 0px",
    height: "60px",
    // width: 'fit-content',
    padding: "20px 15px 10px",
    borderBottom: "2px solid blue",
    backgroundColor: "#fff",
    color: "#2c2c2c",
    width: 300,
    fontWeight: 600
  }
}));

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const classes = useStyles();
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label={dob && "Date of Birth"}
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        InputProps={{ className: !dob ? classes.datepicker : null }} //<----apply style when no date selected
      />
    </MuiPickersUtilsProvider>
  );
}

The codesandbox demo has been updated to reflect all the points above.