diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx
index 2898233ca2..7f185fef0b 100644
--- a/client/app/components/DateTimeInput.jsx
+++ b/client/app/components/DateTimeInput.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
@@ -13,20 +13,21 @@ export function DateTimeInput({
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
-  let defaultValue;
+  const additionalAttributes = {};
   if (value && value.isValid()) {
-    defaultValue = value;
+    additionalAttributes.defaultValue = value;
   }
-  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const currentValueRef = useRef(additionalAttributes.defaultValue);
   return (
     <DatePicker
       className={className}
       showTime
-      value={currentValue}
+      {...additionalAttributes}
       format={format}
       placeholder="Select Date and Time"
-      onChange={newValue => setCurrentValue(newValue)}
+      onChange={(newValue) => { currentValueRef.current = newValue; }}
       onOpenChange={(status) => {
+        const currentValue = currentValueRef.current;
         if (!status) { // on close picker
           if (currentValue && currentValue.isValid()) {
             onSelect(currentValue);
diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx
index 625f46f35f..d6c17ab130 100644
--- a/client/app/components/DateTimeRangeInput.jsx
+++ b/client/app/components/DateTimeRangeInput.jsx
@@ -1,5 +1,5 @@
 import { isArray } from 'lodash';
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
@@ -16,19 +16,20 @@ export function DateTimeRangeInput({
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
-  let defaultValue;
+  const additionalAttributes = {};
   if (isArray(value) && value[0].isValid() && value[1].isValid()) {
-    defaultValue = value;
+    additionalAttributes.defaultValue = value;
   }
-  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const currentValueRef = useRef(additionalAttributes.defaultValue);
   return (
     <RangePicker
       className={className}
       showTime
-      value={currentValue}
+      {...additionalAttributes}
       format={format}
-      onChange={newValue => setCurrentValue(newValue)}
+      onChange={(newValue) => { currentValueRef.current = newValue; }}
       onOpenChange={(status) => {
+        const currentValue = currentValueRef.current;
         if (!status) { // on close picker
           if (isArray(currentValue) && currentValue[0].isValid() && currentValue[1].isValid()) {
             onSelect(currentValue);