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

(cherry picked from commit 12d2f2c026)

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

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