diff --git a/packages/grafana-prometheus/src/components/metrics-browser/MetricSelector.tsx b/packages/grafana-prometheus/src/components/metrics-browser/MetricSelector.tsx
index 86f62480208..ec140ec183e 100644
--- a/packages/grafana-prometheus/src/components/metrics-browser/MetricSelector.tsx
+++ b/packages/grafana-prometheus/src/components/metrics-browser/MetricSelector.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { FixedSizeList } from 'react-window';
+import { List } from 'react-window';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -65,15 +65,12 @@ export function MetricSelector() {
           className={styles.valueListWrapper}
           data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.metricList}
         >
-          <FixedSizeList
-            height={Math.min(450, filteredMetrics.length * LIST_ITEM_SIZE)}
-            itemCount={filteredMetrics.length}
-            itemSize={LIST_ITEM_SIZE}
-            itemKey={(i) => filteredMetrics[i].name}
-            width={300}
+          <List
+            rowProps={{}}
+            rowCount={filteredMetrics.length}
+            rowHeight={LIST_ITEM_SIZE}
             className={styles.valueList}
-          >
-            {({ index, style }) => {
+            rowComponent={({ index, style }) => {
               const metric = filteredMetrics[index];
               return (
                 <div style={style}>
@@ -92,7 +89,11 @@ export function MetricSelector() {
                 </div>
               );
             }}
-          </FixedSizeList>
+            style={{
+              height: Math.min(450, filteredMetrics.length * LIST_ITEM_SIZE),
+              width: 300,
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/packages/grafana-prometheus/src/components/metrics-browser/ValueSelector.tsx b/packages/grafana-prometheus/src/components/metrics-browser/ValueSelector.tsx
index e0a26f2e8e4..aa08f4e2e4b 100644
--- a/packages/grafana-prometheus/src/components/metrics-browser/ValueSelector.tsx
+++ b/packages/grafana-prometheus/src/components/metrics-browser/ValueSelector.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { FixedSizeList } from 'react-window';
+import { List } from 'react-window';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { t, Trans } from '@grafana/i18n';
@@ -78,15 +78,16 @@ export function ValueSelector() {
                 <div className={styles.valueTitle}>
                   <PromLabel name={lk} active={true} hidden={false} facets={lv.length} onClick={onLabelKeyClick} />
                 </div>
-                <FixedSizeList
-                  height={Math.min(200, LIST_ITEM_SIZE * (lv.length || 0))}
-                  itemCount={lv.length || 0}
-                  itemSize={28}
-                  itemKey={(i) => lv[i]}
-                  width={200}
+                <List
+                  rowProps={{}}
+                  rowCount={lv.length || 0}
+                  rowHeight={28}
+                  style={{
+                    height: Math.min(200, LIST_ITEM_SIZE * (lv.length || 0)),
+                    width: 200,
+                  }}
                   className={styles.valueList}
-                >
-                  {({ index, style }) => {
+                  rowComponent={({ index, style }) => {
                     const value = lv[index];
                     const isSelected = selectedLabelValues[lk]?.includes(value);
                     return (
@@ -101,7 +102,7 @@ export function ValueSelector() {
                       </div>
                     );
                   }}
-                </FixedSizeList>
+                />
               </div>
             );
           })}