Fixed reference error

src/utils/BooleanControl.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, FC, useRef } from 'react';
+import { ChangeEvent, FC } from 'react';
 import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
 import { identity } from 'ramda';
+import { useDomId } from './helpers/hooks';
 
 export interface BooleanControlProps {
   checked?: boolean;
@@ -17,7 +17,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
 const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange = identity, className, children, type, inline = false },
 ) => {
-  const { current: id } = useRef(uuid());
+  const id = useDomId();
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
   const typeClasses = {
     'form-switch': type === 'switch',

src/utils/helpers/hooks.ts

@@ -2,6 +2,7 @@ import { useState, useRef, EffectCallback, DependencyList, useEffect } from 'rea
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { useNavigate } from 'react-router-dom';
 import { parseQuery, stringifyQuery } from './query';
+import { v4 as uuid } from 'uuid';
 
 const DEFAULT_DELAY = 2000;
 
@@ -82,3 +83,8 @@ export const useGoBack = () => {
 
   return () => navigate(-1);
 };
+
+export const useDomId = (): string => {
+  const { current: id } = useRef(`dom-${uuid()}`);
+  return id;
+};