diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
index 76dfd63d364..fb2416f437c 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
@@ -15,6 +15,7 @@ export function getEditOptions(layoutManager: AutoGridLayoutManager): OptionsPan
 
   options.push(
     new OptionsPaneItemDescriptor({
+      id: 'layout-auto-grid-column-options',
       title: t('dashboard-scene.get-edit-options.title.column-options', 'Column options'),
       skipField: true,
       render: () => <GridLayoutColumns layoutManager={layoutManager} />,
@@ -23,6 +24,7 @@ export function getEditOptions(layoutManager: AutoGridLayoutManager): OptionsPan
 
   options.push(
     new OptionsPaneItemDescriptor({
+      id: 'layout-auto-grid-row-height',
       title: t('dashboard-scene.get-edit-options.title.row-height-options', 'Row height options'),
       skipField: true,
       render: () => <GridLayoutRows layoutManager={layoutManager} />,
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
index 9f822fe01e7..d51b58d52dd 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -15,15 +14,16 @@ import { dashboardEditActions } from '../../edit-pane/shared';
 import { DashboardGridItem } from './DashboardGridItem';
 
 export function getDashboardGridItemOptions(gridItem: DashboardGridItem): OptionsPaneCategoryDescriptor[] {
+  const categoryId = 'repeat-options';
   const repeatCategory = new OptionsPaneCategoryDescriptor({
     title: t('dashboard.default-layout.item-options.repeat.title', 'Repeat options'),
-    id: 'Repeat options',
+    id: categoryId,
     isOpenDefault: false,
   })
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.variable.title', 'Repeat by variable'),
-        id: uuidv4(),
+        id: `${categoryId}-repeat-by-variable`,
         description: t(
           'dashboard.default-layout.item-options.repeat.variable.description',
           'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.'
@@ -34,6 +34,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.direction.title', 'Repeat direction'),
+        id: `${categoryId}-repeat-direction`,
         useShowIf: () => {
           const { variableName } = gridItem.useState();
           return Boolean(variableName);
@@ -44,7 +45,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.max', 'Max per row'),
-        id: uuidv4(),
+        id: `${categoryId}-max-per-row`,
         useShowIf: () => {
           const { variableName, repeatDirection } = gridItem.useState();
           return Boolean(variableName) && repeatDirection === 'h';
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
index a05393bca37..a981cdcacdb 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
@@ -1,5 +1,4 @@
 import { useId, useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -19,13 +18,19 @@ import { RowItem } from './RowItem';
 
 export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPaneCategoryDescriptor[] {
   const { layout } = model.useState();
+  const rowCategoryId = useId();
+  const repeatCategoryId = useId();
+  const rowTitleId = useId();
+  const fillScreenId = useId();
+  const hideRowHeaderId = useId();
 
   const rowCategory = useMemo(
     () =>
-      new OptionsPaneCategoryDescriptor({ title: '', id: 'row-options' })
+      new OptionsPaneCategoryDescriptor({ title: '', id: rowCategoryId })
         .addItem(
           new OptionsPaneItemDescriptor({
             title: '',
+            id: rowTitleId,
             skipField: true,
             render: () => <RowTitleInput row={model} isNewElement={isNewElement} />,
           })
@@ -33,30 +38,30 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.rows-layout.row-options.row.fill-screen', 'Fill screen'),
-            id: uuidv4(),
+            id: fillScreenId,
             render: (descriptor) => <FillScreenSwitch id={descriptor.props.id} row={model} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.rows-layout.row-options.row.hide-header', 'Hide row header'),
-            id: uuidv4(),
+            id: hideRowHeaderId,
             render: (descriptor) => <RowHeaderSwitch id={descriptor.props.id} row={model} />,
           })
         ),
-    [model, isNewElement]
+    [rowCategoryId, rowTitleId, fillScreenId, hideRowHeaderId, model, isNewElement]
   );
 
   const repeatCategory = useMemo(
     () =>
       new OptionsPaneCategoryDescriptor({
         title: t('dashboard.rows-layout.row-options.repeat.title', 'Repeat options'),
-        id: 'repeat-options',
+        id: repeatCategoryId,
         isOpenDefault: false,
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.rows-layout.row-options.repeat.variable.title', 'Repeat by variable'),
-          id: uuidv4(),
+          id: `${repeatCategoryId}-repeat-by-variable`,
           description: t(
             'dashboard.rows-layout.row-options.repeat.variable.description',
             'Repeat this row for each value in the selected variable.'
@@ -64,7 +69,7 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa
           render: (descriptor) => <RowRepeatSelect id={descriptor.props.id} row={model} />,
         })
       ),
-    [model]
+    [model, repeatCategoryId]
   );
 
   const layoutCategory = useLayoutCategory(layout);
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx
index 4ff26a780ae..8524589b993 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx
@@ -6,9 +6,11 @@ import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/Pan
 import { RowItems } from './RowItems';
 
 export function getEditOptions(model: RowItems): OptionsPaneCategoryDescriptor[] {
-  const options = new OptionsPaneCategoryDescriptor({ title: '', id: `rows-options` }).addItem(
+  const categoryId = 'rows-options';
+  const options = new OptionsPaneCategoryDescriptor({ title: '', id: categoryId }).addItem(
     new OptionsPaneItemDescriptor({
       title: t('dashboard.edit-pane.row.header.title', 'Row header'),
+      id: `${categoryId}-row-header`,
       render: () => <RowHeaderCheckboxMulti model={model} />,
     })
   );
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx b/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx
index 30ad47a3879..4fea265394b 100644
--- a/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useId, useMemo } from 'react';
 
 import { t } from '@grafana/i18n';
 import { RadioButtonGroup, Box } from '@grafana/ui';
@@ -45,24 +45,30 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
   );
 }
 export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
+  const groupLayoutCategoryId = useId();
+  const groupLayoutId = useId();
+  const gridLayoutCategoryId = useId();
+  const gridLayoutId = useId();
+
   return useMemo(() => {
     const isGridLayout = layoutManager.descriptor.isGridLayout;
 
     const groupLayout = new OptionsPaneCategoryDescriptor({
       title: t('dashboard.layout.common.group-layout', 'Group layout'),
-      id: 'group-layout-category',
+      id: groupLayoutCategoryId,
       isOpenDefault: false,
     });
 
     const gridLayout = new OptionsPaneCategoryDescriptor({
       title: t('dashboard.layout.common.panel-layout', 'Panel layout'),
-      id: 'grid-layout-category',
+      id: gridLayoutCategoryId,
       isOpenDefault: false,
     });
 
     gridLayout.addItem(
       new OptionsPaneItemDescriptor({
         title: '',
+        id: gridLayoutId,
         skipField: true,
         render: () => <DashboardLayoutSelector layoutManager={layoutManager} />,
       })
@@ -77,6 +83,7 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
       groupLayout.addItem(
         new OptionsPaneItemDescriptor({
           title: '',
+          id: groupLayoutId,
           skipField: true,
           render: () => <DashboardLayoutSelector layoutManager={layoutManager} />,
         })
@@ -95,5 +102,5 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
     }
 
     return [groupLayout, gridLayout];
-  }, [layoutManager]);
+  }, [gridLayoutCategoryId, gridLayoutId, groupLayoutCategoryId, groupLayoutId, layoutManager]);
 }
diff --git a/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx b/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx
index 0495c4c3a8a..10a4dc84b95 100644
--- a/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 
 import { t } from '@grafana/i18n';
 import { LocalValueVariable } from '@grafana/scenes';
@@ -24,16 +24,19 @@ export class LocalVariableEditableElement implements EditableDashboardElement {
 
   public useEditPaneOptions(): OptionsPaneCategoryDescriptor[] {
     const variable = this.variable;
+    const localVariableCategoryId = useId();
+    const localVariableId = useId();
 
     return useMemo(() => {
       const category = new OptionsPaneCategoryDescriptor({
         title: '',
-        id: 'local-variable-options',
+        id: localVariableCategoryId,
       });
 
       category.addItem(
         new OptionsPaneItemDescriptor({
           title: '',
+          id: localVariableId,
           skipField: true,
           render: () => {
             return (
@@ -52,6 +55,6 @@ export class LocalVariableEditableElement implements EditableDashboardElement {
       );
 
       return [category];
-    }, [variable]);
+    }, [localVariableCategoryId, localVariableId, variable]);
   }
 }