diff --git a/packages/grafana-ui/src/components/Splitter/useSplitter.ts b/packages/grafana-ui/src/components/Splitter/useSplitter.ts
index 4cd43bf6bbc..4987154612c 100644
--- a/packages/grafana-ui/src/components/Splitter/useSplitter.ts
+++ b/packages/grafana-ui/src/components/Splitter/useSplitter.ts
@@ -308,6 +308,8 @@ export function useSplitter(options: UseSplitterOptions) {
     secondaryStyles.flexBasis = `${initialSize}px`;
   }
 
+  const primaryId = `start-panel-${id}`;
+
   return {
     containerProps: {
       ref: containerRef,
@@ -317,6 +319,7 @@ export function useSplitter(options: UseSplitterOptions) {
       ref: firstPaneRef,
       className: styles.panel,
       style: primaryStyles,
+      id: primaryId,
     },
     secondaryProps: {
       ref: secondPaneRef,
@@ -337,7 +340,7 @@ export function useSplitter(options: UseSplitterOptions) {
       'aria-valuemin': 0,
       'aria-valuemax': 100,
       'aria-valuenow': initialSize * 100,
-      'aria-controls': `start-panel-${id}`,
+      'aria-controls': primaryId,
       'aria-label': 'Pane resize widget',
       tabIndex: 0,
       className: dragHandleStyle,