diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx
index a178b2edec..e816059cba 100644
--- a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx
+++ b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx
@@ -12,6 +12,7 @@ describe('CustomDateTimeModal', () => {
 				visible
 				onCreate={handleCreate}
 				onCancel={handleCancel}
+				setCustomDTPickerVisible={jest.fn()}
 			/>,
 		);
 	});
diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
index 57cc54e5e7..904bcd5fd0 100644
--- a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
+++ b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
@@ -1,6 +1,6 @@
 import { DatePicker, Modal } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
-import { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null;
 
@@ -10,12 +10,12 @@ function CustomDateTimeModal({
 	visible,
 	onCreate,
 	onCancel,
+	setCustomDTPickerVisible,
 }: CustomDateTimeModalProps): JSX.Element {
 	const [selectedDate, setDateTime] = useState<DateTimeRangeType>();
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const onModalOkHandler = (date_time: any): void => {
-		onCreate(date_time);
 		setDateTime(date_time);
 	};
 
@@ -25,7 +25,10 @@ function CustomDateTimeModal({
 	};
 
 	const onOk = (): void => {
-		if (selectedDate) onCreate(selectedDate);
+		if (selectedDate) {
+			onCreate(selectedDate);
+			setCustomDTPickerVisible(false);
+		}
 	};
 
 	return (
@@ -42,7 +45,6 @@ function CustomDateTimeModal({
 				allowClear
 				onOk={onModalOkHandler}
 				showTime
-				onCalendarChange={onModalOkHandler}
 			/>
 		</Modal>
 	);
@@ -52,6 +54,7 @@ interface CustomDateTimeModalProps {
 	visible: boolean;
 	onCreate: (dateTimeRange: DateTimeRangeType) => void;
 	onCancel: () => void;
+	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
 }
 
 export default CustomDateTimeModal;
diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
index d776eb25e2..58b090abb9 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
@@ -216,7 +216,6 @@ function DateTimeSelection({
 		if (dateTimeRange !== null) {
 			const [startTimeMoment, endTimeMoment] = dateTimeRange;
 			if (startTimeMoment && endTimeMoment) {
-				setCustomDTPickerVisible(false);
 				updateTimeInterval('custom', [
 					startTimeMoment?.toDate().getTime() || 0,
 					endTimeMoment?.toDate().getTime() || 0,
@@ -352,6 +351,7 @@ function DateTimeSelection({
 				onCancel={(): void => {
 					setCustomDTPickerVisible(false);
 				}}
+				setCustomDTPickerVisible={setCustomDTPickerVisible}
 			/>
 		</div>
 	);