UI/Switch: Makes Switch ID generation more stable (#25542)

packages/grafana-ui/src/components/Switch/Switch.tsx

-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, useRef } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import uniqueId from 'lodash/uniqueId';
 import uniqueId from 'lodash/uniqueId';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
@@ -79,7 +79,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ value, checked, disabled = false, onChange, ...inputProps }, ref) => {
   ({ value, checked, disabled = false, onChange, ...inputProps }, ref) => {
     const theme = useTheme();
     const theme = useTheme();
     const styles = getSwitchStyles(theme);
     const styles = getSwitchStyles(theme);
-    const switchId = uniqueId('switch-');
+    const switchIdRef = useRef(uniqueId('switch-'));
 
 
     return (
     return (
       <div className={cx(styles.switch)}>
       <div className={cx(styles.switch)}>
@@ -90,11 +90,11 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
           onChange={event => {
           onChange={event => {
             onChange?.(event);
             onChange?.(event);
           }}
           }}
-          id={switchId}
+          id={switchIdRef.current}
           {...inputProps}
           {...inputProps}
           ref={ref}
           ref={ref}
         />
         />
-        <label htmlFor={switchId} />
+        <label htmlFor={switchIdRef.current} />
       </div>
       </div>
     );
     );
   }
   }