diff --git a/src/VisualQueryBuilder/components/LabelFilterItem.tsx b/src/VisualQueryBuilder/components/LabelFilterItem.tsx
index 3b76ed6..31d06e7 100644
--- a/src/VisualQueryBuilder/components/LabelFilterItem.tsx
+++ b/src/VisualQueryBuilder/components/LabelFilterItem.tsx
@@ -1,5 +1,5 @@
import { uniqBy } from 'lodash';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
import { v4 } from 'uuid';
import { SelectableValue, toOption } from '@grafana/data';
@@ -71,7 +71,7 @@ export function LabelFilterItem({
};
const isConflicting = isConflictingLabelFilter(item, items);
- const id = v4();
+ const { current: id } = useRef(v4());
return (
diff --git a/src/VisualQueryBuilder/components/OperationEditor.tsx b/src/VisualQueryBuilder/components/OperationEditor.tsx
index 62818b4..21d04ba 100644
--- a/src/VisualQueryBuilder/components/OperationEditor.tsx
+++ b/src/VisualQueryBuilder/components/OperationEditor.tsx
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import { Draggable, DraggableProvided } from 'react-beautiful-dnd';
import { v4 } from 'uuid';
@@ -49,7 +49,7 @@ export function OperationEditor({
}: Props) {
const def = queryModeller.getOperationDefinition(operation.id);
const shouldFlash = useFlash(flash);
- const id = v4();
+ const { current: id } = useRef(v4());
const theme = useTheme2();
const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;