diff --git a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.js b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.js
index ace208ba8128e..af59bc764c643 100644
--- a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.js
+++ b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.js
@@ -11,7 +11,7 @@ export default function CustomDayOfWeekFormat() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateCalendar
         value={value}
-        onChange={setValue}
+        onChange={(newValue) => setValue(newValue)}
         dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`}
       />
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx
index f5efa592c8a71..0652ec9c58d2e 100644
--- a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx
+++ b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx
@@ -11,7 +11,7 @@ export default function CustomDayOfWeekFormat() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateCalendar
         value={value}
-        onChange={setValue}
+        onChange={(newValue) => setValue(newValue)}
         dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`}
       />
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview
index aa3786a11e939..2736d20dc6a71 100644
--- a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview
+++ b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview
@@ -1,5 +1,5 @@
 <DateCalendar
   value={value}
-  onChange={setValue}
+  onChange={(newValue) => setValue(newValue)}
   dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`}
 />
\ No newline at end of file
diff --git a/docs/data/date-pickers/base-concepts/ControlledComponent.js b/docs/data/date-pickers/base-concepts/ControlledComponent.js
index aa572d1a900df..e7e897d19f6e3 100644
--- a/docs/data/date-pickers/base-concepts/ControlledComponent.js
+++ b/docs/data/date-pickers/base-concepts/ControlledComponent.js
@@ -11,7 +11,7 @@ export default function ControlledComponent() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DatePicker']}>
-        <DatePicker value={value} onChange={setValue} />
+        <DatePicker value={value} onChange={(newValue) => setValue(newValue)} />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx
index 10f887cb6574e..6161ac269a592 100644
--- a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx
+++ b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx
@@ -11,7 +11,7 @@ export default function ControlledComponent() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DatePicker']}>
-        <DatePicker value={value} onChange={setValue} />
+        <DatePicker value={value} onChange={(newValue) => setValue(newValue)} />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx.preview b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx.preview
index 891aba9b3bace..fde8708e14160 100644
--- a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx.preview
+++ b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx.preview
@@ -1 +1 @@
-<DatePicker value={value} onChange={setValue} />
\ No newline at end of file
+<DatePicker value={value} onChange={(newValue) => setValue(newValue)} />
\ No newline at end of file
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
index 14a382ac58f43..6082f6580ca7c 100644
--- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -42,7 +42,7 @@ function ButtonDateField(props) {
     }
   };
 
-  const formattedValue = value == null ? parsedFormat : value.format(format);
+  const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
     <Button
@@ -52,7 +52,7 @@ function ButtonDateField(props) {
       ref={InputProps?.ref}
       onClick={handleTogglePicker}
     >
-      {label ? `${label}: ${formattedValue}` : formattedValue}
+      {label ? `${label}: ${valueStr}` : valueStr}
     </Button>
   );
 }
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
index 4479e95604663..ae9ffb08d896c 100644
--- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -46,7 +46,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
     }
   };
 
-  const formattedValue = value == null ? parsedFormat : value.format(format);
+  const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
     <Button
@@ -56,7 +56,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
       ref={InputProps?.ref}
       onClick={handleTogglePicker}
     >
-      {label ? `${label}: ${formattedValue}` : formattedValue}
+      {label ? `${label}: ${valueStr}` : valueStr}
     </Button>
   );
 }
diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js
index 7d0685d3c35f7..0723d4565c514 100644
--- a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js
+++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js
@@ -15,12 +15,12 @@ const ACCEPT_REGEX = /[\d]/gi;
 const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000');
 const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000');
 
-function getInputValueFromDate(date, format) {
-  if (date == null) {
+function getValueStrFromValue(value, format) {
+  if (value == null) {
     return '';
   }
 
-  return date.isValid() ? date.format(format) : '';
+  return value.isValid() ? value.format(format) : '';
 }
 
 function MaskedField(props) {
@@ -46,12 +46,12 @@ function MaskedField(props) {
 
   // Control the input text
   const [inputValue, setInputValue] = React.useState(() =>
-    getInputValueFromDate(value, format),
+    getValueStrFromValue(value, format),
   );
 
   React.useEffect(() => {
     if (value && value.isValid()) {
-      const newDisplayDate = getInputValueFromDate(value, format);
+      const newDisplayDate = getValueStrFromValue(value, format);
       setInputValue(newDisplayDate);
     }
   }, [format, value]);
diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx
index a2a4807660863..13c0a71b54568 100644
--- a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx
+++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx
@@ -19,12 +19,12 @@ const ACCEPT_REGEX = /[\d]/gi;
 const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000');
 const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000');
 
-function getInputValueFromDate(date: Dayjs | null, format: string) {
-  if (date == null) {
+function getValueStrFromValue(value: Dayjs | null, format: string) {
+  if (value == null) {
     return '';
   }
 
-  return date.isValid() ? date.format(format) : '';
+  return value.isValid() ? value.format(format) : '';
 }
 
 function MaskedField(props: DatePickerFieldProps) {
@@ -50,12 +50,12 @@ function MaskedField(props: DatePickerFieldProps) {
 
   // Control the input text
   const [inputValue, setInputValue] = React.useState<string>(() =>
-    getInputValueFromDate(value, format),
+    getValueStrFromValue(value, format),
   );
 
   React.useEffect(() => {
     if (value && value.isValid()) {
-      const newDisplayDate = getInputValueFromDate(value, format);
+      const newDisplayDate = getValueStrFromValue(value, format);
       setInputValue(newDisplayDate);
     }
   }, [format, value]);
diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.js b/docs/data/date-pickers/date-calendar/DateCalendarValue.js
index c690fb3f237b2..d52585f46af1d 100644
--- a/docs/data/date-pickers/date-calendar/DateCalendarValue.js
+++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.js
@@ -15,7 +15,7 @@ export default function DateCalendarValue() {
           <DateCalendar defaultValue={dayjs('2022-04-17')} />
         </DemoItem>
         <DemoItem label="Controlled calendar">
-          <DateCalendar value={value} onChange={setValue} />
+          <DateCalendar value={value} onChange={(newValue) => setValue(newValue)} />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx
index 6a0b29efd7b74..b123280c174a1 100644
--- a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx
+++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx
@@ -15,7 +15,7 @@ export default function DateCalendarValue() {
           <DateCalendar defaultValue={dayjs('2022-04-17')} />
         </DemoItem>
         <DemoItem label="Controlled calendar">
-          <DateCalendar value={value} onChange={setValue} />
+          <DateCalendar value={value} onChange={(newValue) => setValue(newValue)} />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview
index 00e6b756ba865..ce3c4579060ff 100644
--- a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview
+++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview
@@ -2,5 +2,5 @@
   <DateCalendar defaultValue={dayjs('2022-04-17')} />
 </DemoItem>
 <DemoItem label="Controlled calendar">
-  <DateCalendar value={value} onChange={setValue} />
+  <DateCalendar value={value} onChange={(newValue) => setValue(newValue)} />
 </DemoItem>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-field/DateFieldValue.js b/docs/data/date-pickers/date-field/DateFieldValue.js
index 25a02faf37f8e..b956153ebba8b 100644
--- a/docs/data/date-pickers/date-field/DateFieldValue.js
+++ b/docs/data/date-pickers/date-field/DateFieldValue.js
@@ -12,7 +12,11 @@ export default function DateFieldValue() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DateField']}>
         <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
-        <DateField label="Controlled field" value={value} onChange={setValue} />
+        <DateField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx b/docs/data/date-pickers/date-field/DateFieldValue.tsx
index 87c21c5be5313..e4e26fd70f519 100644
--- a/docs/data/date-pickers/date-field/DateFieldValue.tsx
+++ b/docs/data/date-pickers/date-field/DateFieldValue.tsx
@@ -12,7 +12,11 @@ export default function DateFieldValue() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DateField']}>
         <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
-        <DateField label="Controlled field" value={value} onChange={setValue} />
+        <DateField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview b/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview
index de10d6ed45c16..df9ed2abd024b 100644
--- a/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview
+++ b/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview
@@ -1,2 +1,6 @@
 <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
-<DateField label="Controlled field" value={value} onChange={setValue} />
\ No newline at end of file
+<DateField
+  label="Controlled field"
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js
index 9206d11c9f91a..e6c05d164921b 100644
--- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js
+++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js
@@ -20,7 +20,10 @@ export default function DateRangeCalendarValue() {
           />
         </DemoItem>
         <DemoItem label="Controlled calendar">
-          <DateRangeCalendar value={value} onChange={setValue} />
+          <DateRangeCalendar
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx
index f0b3aff6f9849..eb4d8353c36ab 100644
--- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx
+++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx
@@ -21,7 +21,10 @@ export default function DateRangeCalendarValue() {
           />
         </DemoItem>
         <DemoItem label="Controlled calendar">
-          <DateRangeCalendar value={value} onChange={setValue} />
+          <DateRangeCalendar
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview
index 4d914add554eb..c5c69bb97ef54 100644
--- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview
+++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview
@@ -4,5 +4,8 @@
   />
 </DemoItem>
 <DemoItem label="Controlled calendar">
-  <DateRangeCalendar value={value} onChange={setValue} />
+  <DateRangeCalendar
+    value={value}
+    onChange={(newValue) => setValue(newValue)}
+  />
 </DemoItem>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js
index 2f4aa0d2b1506..dc16688271942 100644
--- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js
+++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js
@@ -15,7 +15,11 @@ export default function DateTimeFieldValue() {
           label="Uncontrolled field"
           defaultValue={dayjs('2022-04-17T15:30')}
         />
-        <DateTimeField label="Controlled field" value={value} onChange={setValue} />
+        <DateTimeField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx
index 5ac133eead559..1397465ae6062 100644
--- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx
+++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx
@@ -15,7 +15,11 @@ export default function DateTimeFieldValue() {
           label="Uncontrolled field"
           defaultValue={dayjs('2022-04-17T15:30')}
         />
-        <DateTimeField label="Controlled field" value={value} onChange={setValue} />
+        <DateTimeField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview
index 32429cc82c87f..7e36b186cdac1 100644
--- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview
+++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview
@@ -2,4 +2,8 @@
   label="Uncontrolled field"
   defaultValue={dayjs('2022-04-17T15:30')}
 />
-<DateTimeField label="Controlled field" value={value} onChange={setValue} />
\ No newline at end of file
+<DateTimeField
+  label="Controlled field"
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockValue.js b/docs/data/date-pickers/digital-clock/DigitalClockValue.js
index 415e8ad380a77..8ab7c3bb66069 100644
--- a/docs/data/date-pickers/digital-clock/DigitalClockValue.js
+++ b/docs/data/date-pickers/digital-clock/DigitalClockValue.js
@@ -24,7 +24,10 @@ export default function DigitalClockValue() {
             <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
           </DemoItem>
           <DemoItem label="Controlled digital clock">
-            <DigitalClock value={value} onChange={setValue} />
+            <DigitalClock
+              value={value}
+              onChange={(newValue) => setValue(newValue)}
+            />
           </DemoItem>
         </DemoContainer>
         <DemoContainer
@@ -34,7 +37,10 @@ export default function DigitalClockValue() {
             <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
           </DemoItem>
           <DemoItem label="Controlled multi section digital clock">
-            <MultiSectionDigitalClock value={value} onChange={setValue} />
+            <MultiSectionDigitalClock
+              value={value}
+              onChange={(newValue) => setValue(newValue)}
+            />
           </DemoItem>
         </DemoContainer>
       </DemoContainer>
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx b/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx
index bde3e47c17e97..882d0bd52b0bf 100644
--- a/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx
+++ b/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx
@@ -24,7 +24,10 @@ export default function DigitalClockValue() {
             <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
           </DemoItem>
           <DemoItem label="Controlled digital clock">
-            <DigitalClock value={value} onChange={setValue} />
+            <DigitalClock
+              value={value}
+              onChange={(newValue) => setValue(newValue)}
+            />
           </DemoItem>
         </DemoContainer>
         <DemoContainer
@@ -34,7 +37,10 @@ export default function DigitalClockValue() {
             <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
           </DemoItem>
           <DemoItem label="Controlled multi section digital clock">
-            <MultiSectionDigitalClock value={value} onChange={setValue} />
+            <MultiSectionDigitalClock
+              value={value}
+              onChange={(newValue) => setValue(newValue)}
+            />
           </DemoItem>
         </DemoContainer>
       </DemoContainer>
diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js
index d2df739bbe9f2..c66c5e1538ba8 100644
--- a/docs/data/date-pickers/fields/ClearableBehavior.js
+++ b/docs/data/date-pickers/fields/ClearableBehavior.js
@@ -37,7 +37,7 @@ export default function ClearableBehavior() {
           <DateField
             sx={{ width: '300px' }}
             value={value}
-            onChange={setValue}
+            onChange={(newValue) => setValue(newValue)}
             onClear={() => setCleared(true)}
             clearable
           />
diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx b/docs/data/date-pickers/fields/ClearableBehavior.tsx
index e06a48a3ac680..0aeceeaf2950e 100644
--- a/docs/data/date-pickers/fields/ClearableBehavior.tsx
+++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx
@@ -37,7 +37,7 @@ export default function ClearableBehavior() {
           <DateField
             sx={{ width: '300px' }}
             value={value}
-            onChange={setValue}
+            onChange={(newValue) => setValue(newValue)}
             onClear={() => setCleared(true)}
             clearable
           />
diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.js b/docs/data/date-pickers/time-clock/TimeClockValue.js
index f05035f944308..1358860d8cc10 100644
--- a/docs/data/date-pickers/time-clock/TimeClockValue.js
+++ b/docs/data/date-pickers/time-clock/TimeClockValue.js
@@ -15,7 +15,7 @@ export default function TimeClockValue() {
           <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
         </DemoItem>
         <DemoItem label="Controlled clock">
-          <TimeClock value={value} onChange={setValue} />
+          <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.tsx b/docs/data/date-pickers/time-clock/TimeClockValue.tsx
index 2d5cd57ba7f5c..c514ceb62fbcf 100644
--- a/docs/data/date-pickers/time-clock/TimeClockValue.tsx
+++ b/docs/data/date-pickers/time-clock/TimeClockValue.tsx
@@ -15,7 +15,7 @@ export default function TimeClockValue() {
           <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
         </DemoItem>
         <DemoItem label="Controlled clock">
-          <TimeClock value={value} onChange={setValue} />
+          <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
         </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview b/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview
index e87ba575ead9b..02a4962dc4e59 100644
--- a/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview
+++ b/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview
@@ -2,5 +2,5 @@
   <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
 </DemoItem>
 <DemoItem label="Controlled clock">
-  <TimeClock value={value} onChange={setValue} />
+  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
 </DemoItem>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.js b/docs/data/date-pickers/time-field/TimeFieldValue.js
index 8a052c0006012..1308f41258a13 100644
--- a/docs/data/date-pickers/time-field/TimeFieldValue.js
+++ b/docs/data/date-pickers/time-field/TimeFieldValue.js
@@ -15,7 +15,11 @@ export default function TimeFieldValue() {
           label="Uncontrolled field"
           defaultValue={dayjs('2022-04-17T15:30')}
         />
-        <TimeField label="Controlled field" value={value} onChange={setValue} />
+        <TimeField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.tsx b/docs/data/date-pickers/time-field/TimeFieldValue.tsx
index 716d71c7db7b1..24f5cf2bb4b1d 100644
--- a/docs/data/date-pickers/time-field/TimeFieldValue.tsx
+++ b/docs/data/date-pickers/time-field/TimeFieldValue.tsx
@@ -15,7 +15,11 @@ export default function TimeFieldValue() {
           label="Uncontrolled field"
           defaultValue={dayjs('2022-04-17T15:30')}
         />
-        <TimeField label="Controlled field" value={value} onChange={setValue} />
+        <TimeField
+          label="Controlled field"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview b/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview
index 1ec6e5029a919..1c5433da96d6a 100644
--- a/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview
+++ b/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview
@@ -2,4 +2,8 @@
   label="Uncontrolled field"
   defaultValue={dayjs('2022-04-17T15:30')}
 />
-<TimeField label="Controlled field" value={value} onChange={setValue} />
\ No newline at end of file
+<TimeField
+  label="Controlled field"
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+/>
\ No newline at end of file