set 4 PM by default in time selection for React DateTimePicker

I am working on React DateTimePicker where I need to set time to 4 PM but do not show that value in datetimepicker input field instead show only after datetimepicker icon click. How to set 4 PM by default in time selection for React DateTimePicker? I am able to set the time to current date to today date and time to 4 PM suppose as "14-Sep-2024 04:00 PM" but value is showing by default on the page load. Instead as per my requirement I have to show only on date selection.

My code is

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
----------------
----------------
----------------
<DateTimePicker name={'myDatePickerValue'}
  disablePast
  onChange={(date) => {
     handleMyDatePickerValueChange(date)
  }}                                                                                                          
  value={myDatePickerValue? dayjs(myDatePickerValue) : dayjs().hour(16).minute(0).second(0).millisecond(0) }
  format="DD-MMM-YYYY hh:mm A"
  minDateTime={dayjs()}             
/>

As per my requirement, I don't want to show the input value in the datetimepicker input because I need to show as "DD-MMM-YYYY hh:mm A" initially and I have to show the value only after user selects the value from datetimepicker icon. I only need to show current date and time as 4 PM after clicking on datepicker icon only. Any help in this?

After a lot of effort, I wrote below solution on my own:

<DateTimePicker 
  value={dayjs(myDatePicker)} 
  onChange={handleMyDatePickerChange} 
  disablePast
  format="DD-MMM-YYYY hh:mm A"
  minDateTime={dayjs()}
  slotProps={{
      textField: {
      readOnly: true,
    },
  }} 
/>

const handleMyDatePickerChange = (date: any) => {
    const dateValue = getDateValue(date);
    setmyDatePicker(dateValue);
};

const getDateValue = (date: any) => {
    if (date === null) return null;

    const selectedDate = dayjs(date.$d).date();
    const selectedMonth = dayjs(date.$d).month();
    const myDatePickerValue = myDatePicker ? dayjs(optionExpiryDate).date() : null;
    const myDatePickerMonthValue = myDatePicker ? dayjs(myDatePicker).month() : null;
    const todayDate = dayjs().date()
    const currentMonth = dayjs().month()
    const currentHours = dayjs().hour()

    if (date.isBefore(dayjs())) {
        return handlePastDate(date, selectedDate, myDatePickerValue, todayDate, currentHours);
    } else if (date.isAfter(dayjs())) {
        return handleFutureDate(date, selectedDate, selectedMonth, myDatePickerValue, myDatePickerMonthValue, todayDate, currentMonth);
    } else {
        return date;
    }
};

const handlePastDate = (date, selectedDate, myDatePickerValue, todayDate, currentHours) => {
    if (selectedDate === myDatePickerValue) {
        if (dayjs().hour() <= dayjs(date.$d).hour()) {
            return date;
        } else {
            return dayjs(new Date());
        }
    } else {
        if ((myDatePickerValue === null || selectedDate === myDatePickerValue || selectedDate === todayDate) && currentHours <= 16) {
            return dayjs(date.$d).hour(16).minute(0).second(0).millisecond(0);
        } else {
            return dayjs(new Date());
        }
    }
};

const handleFutureDate = (date, selectedDate, selectedMonth, myDatePickerValue, myDatePickerMonthValue, todayDate, currentMonth) => {
    if (selectedDate === myDatePickerValue) {
        return date;
    } else {
        if(selectedDate === todayDate || selectedDate > todayDate || selectedMonth > currentMonth || selectedMonth > myDatePickerMonthValue){
            return dayjs(date.$d).hour(16).minute(0).second(0).millisecond(0)
        }else{
            return dayjs(new Date())
        }
    }
};