diff --git a/src/Calendar/useCalendarDate.ts b/src/Calendar/useCalendarDate.ts
index f1687317e..94db435a3 100644
--- a/src/Calendar/useCalendarDate.ts
+++ b/src/Calendar/useCalendarDate.ts
@@ -15,16 +15,19 @@ const useCalendarDate = (value: Date | null | undefined, defaultDate: Date | und
     [calendarDate]
   );
 
-  const resetCalendarDate = useCallback(() => {
-    setValue(value ?? defaultDate ?? new Date());
-  }, [defaultDate, value]);
+  const resetCalendarDate = useCallback(
+    (nextValue = value) => {
+      setValue(nextValue ?? defaultDate ?? new Date());
+    },
+    [defaultDate, value]
+  );
 
   useUpdateEffect(() => {
     if (value?.valueOf() !== valueRef.current?.valueOf()) {
-      setCalendarDate(value ?? new Date());
+      setCalendarDate(value ?? defaultDate ?? new Date());
       valueRef.current = value;
     }
-  }, [value]);
+  }, [value, defaultDate]);
 
   return { calendarDate, setCalendarDate, resetCalendarDate };
 };
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
index bffa8d9b7..6ae29b6c5 100644
--- a/src/DatePicker/DatePicker.tsx
+++ b/src/DatePicker/DatePicker.tsx
@@ -313,7 +313,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
     const handleClean = useCallback(
       (event: React.SyntheticEvent) => {
         updateValue(event, null);
-        resetCalendarDate();
+        resetCalendarDate(null);
       },
       [resetCalendarDate, updateValue]
     );
diff --git a/src/DatePicker/test/DatePickerSpec.tsx b/src/DatePicker/test/DatePickerSpec.tsx
index e0293242e..c0dadc166 100644
--- a/src/DatePicker/test/DatePickerSpec.tsx
+++ b/src/DatePicker/test/DatePickerSpec.tsx
@@ -867,4 +867,44 @@ describe('DatePicker', () => {
 
     expect(headerTitle).to.have.text(format(addMonths(today, 1), 'MMM yyyy'));
   });
+
+  it('Should the calendar date be reset when the controlled value is cleared', () => {
+    const ref = React.createRef<PickerHandle>();
+
+    const App = () => {
+      const [value, setValue] = React.useState<Date | null>();
+      return (
+        <DatePicker
+          ref={ref as any}
+          value={value}
+          onChange={setValue}
+          format="yyyy-MM-dd HH:mm:ss"
+          calendarDefaultDate={new Date('2022-02-02 00:00:00')}
+          ranges={[{ label: 'This day', value: new Date('2023-01-01 10:20:30') }]}
+        />
+      );
+    };
+
+    render(<App />);
+
+    fireEvent.click(ref.current?.target as HTMLElement);
+
+    const headerDateElement = ref.current?.overlay?.querySelector('.rs-calendar-header-title-date');
+    const headerTimeElement = ref.current?.overlay?.querySelector('.rs-calendar-header-title-time');
+
+    expect(headerDateElement).to.have.text('Feb 2022');
+    expect(headerTimeElement).to.have.text('00:00:00');
+
+    fireEvent.click(screen.getByRole('button', { name: 'This day' }));
+
+    expect(headerDateElement).to.have.text('Jan 2023');
+    expect(headerTimeElement).to.have.text('10:20:30');
+    expect(ref.current?.target).to.have.text('2023-01-01 10:20:30');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
+    fireEvent.click(ref.current?.target as HTMLElement);
+
+    expect(headerDateElement).to.have.text('Feb 2022');
+    expect(headerTimeElement).to.have.text('00:00:00');
+  });
 });