I am using the controlled form of DatePicker
In the onChange handler I need a way to prevent date selection on certain condition

To do that I am setting the value to null
Still I the field displays the clicked value
I need the field to be in the initial state even after clicking the date
How do I achieve this?

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerValue() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        
        <DatePicker
          label="Controlled picker"
          value={value}
          onChange={(newValue) => setValue(null)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}