Fix Calendar displaying value when controlled state is not updated (#8457)

* Fix Calendar showing value when controlled state is not updated

* Fix lint issues in Calendar controlled value sync

* Fix unstable updateInputfield dependency via ref

* Fix: stabilize updateInputfield ref to satisfy hooks lint

* Refactor useEffect for input field update

---------

Co-authored-by: Melloware <mellowaredev@gmail.com>

Author: Coderxrohan

components/lib/calendar/Calendar.js

@@ -62,6 +62,7 @@ export const Calendar = React.memo(
         const viewChangedWithKeyDown = React.useRef(false);
         const onChangeRef = React.useRef(null);
         const isClearClicked = React.useRef(false);
+        const updateInputfieldRef = React.useRef(null);
 
         const [currentView, setCurrentView] = React.useState('date');
         const [currentMonth, setCurrentMonth] = React.useState(null);
@@ -1771,8 +1772,6 @@ export const Calendar = React.memo(
                     value: date
                 });
             }
-
-            updateInputfield(selectedValues);
         };
 
         const decrementDecade = () => {
@@ -2562,6 +2561,8 @@ export const Calendar = React.memo(
             inputRef.current.value = formattedValue;
         };
 
+        updateInputfieldRef.current = updateInputfield;
+
         const formatDateTime = (date) => {
             if (props.formatDateTime) {
                 return props.formatDateTime(date);
@@ -3037,6 +3038,12 @@ export const Calendar = React.memo(
             ObjectUtils.combinedRefs(inputRef, props.inputRef);
         }, [inputRef, props.inputRef]);
 
+        React.useEffect(() => {
+            if (props.value !== previousValue) {
+                updateInputfieldRef.current && updateInputfieldRef.current(props.value);
+            }
+        }, [props.value, previousValue]);
+
         useMountEffect(() => {
             let viewDate = getViewDate(props.viewDate);