diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index ef85297d92..264f657363 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -5,7 +5,7 @@ import query from 'api/dashboard/variables/query';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import map from 'lodash-es/map';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import { variablePropsToPayloadVariables } from '../utils';
@@ -24,6 +24,16 @@ interface VariableItemProps {
 	onAllSelectedUpdate: (name: string, arg1: boolean) => void;
 	lastUpdatedVar: string;
 }
+
+const getSelectValue = (
+	selectedValue: IDashboardVariable['selectedValue'],
+): string | string[] => {
+	if (Array.isArray(selectedValue)) {
+		return selectedValue.map((item) => item.toString());
+	}
+	return selectedValue?.toString() || '';
+};
+
 function VariableItem({
 	variableData,
 	existingVariables,
@@ -141,9 +151,15 @@ function VariableItem({
 			}
 	};
 
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(() => getSelectValue(selectedValue), [
+		selectedValue,
+	]);
+
 	const selectValue = variableData.allSelected
 		? 'ALL'
-		: variableData.selectedValue?.toString() || '';
+		: selectedValueStringified;
+
 	const mode =
 		variableData.multiSelect && !variableData.allSelected
 			? 'multiple'