diff --git a/src/client/components/CheckboxInput.tsx b/src/client/components/CheckboxInput.tsx
index e7a187097..01ea9e15b 100644
--- a/src/client/components/CheckboxInput.tsx
+++ b/src/client/components/CheckboxInput.tsx
@@ -125,7 +125,8 @@ export const CheckboxInput = ({
 	cssOverrides,
 	onToggle,
 }: CheckboxInputProps): EmotionJSX.Element => {
-	const switchName = id ?? useId();
+	const defaultId = useId();
+	const switchName = id ?? defaultId;
 	const labelId = descriptionId(switchName);
 
 	return (
diff --git a/src/client/components/ToggleSwitchInput.tsx b/src/client/components/ToggleSwitchInput.tsx
index 4b9f5e486..e7a9de553 100644
--- a/src/client/components/ToggleSwitchInput.tsx
+++ b/src/client/components/ToggleSwitchInput.tsx
@@ -173,7 +173,8 @@ export const ToggleSwitchInput = ({
 	imagePath,
 	cssOverrides,
 }: ToggleSwitchInputProps): EmotionJSX.Element => {
-	const switchName = id ?? useId();
+	const defaultId = useId();
+	const switchName = id ?? defaultId;
 	const labelId = descriptionId(switchName);
 
 	return (