diff --git a/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx b/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
index dd9b17beb3c..cb0f96ef54d 100644
--- a/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
+++ b/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
@@ -265,6 +265,8 @@ describe('PromVariableQueryEditor', () => {
     const labelSelect = screen.getByLabelText('label-select');
     await userEvent.type(labelSelect, 'this');
     await selectOptionInTest(labelSelect, 'this');
+    //display label in label select
+    await waitFor(() => expect(screen.getByText('this')).toBeInTheDocument());
 
     await waitFor(() =>
       expect(onChange).toHaveBeenCalledWith({
diff --git a/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx b/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
index 6c1c470c69d..ab7f041590c 100644
--- a/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
+++ b/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
@@ -2,7 +2,7 @@
 import debounce from 'debounce-promise';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import { QueryEditorProps, SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { AsyncSelect, InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
 
@@ -286,7 +286,7 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
               <AsyncSelect
                 aria-label="label-select"
                 onChange={onLabelChange}
-                value={label}
+                value={label ? toOption(label) : null}
                 defaultOptions={truncatedLabelOptions}
                 width={25}
                 allowCustomValue