diff --git a/.changeset/nice-starfishes-itch.md b/.changeset/nice-starfishes-itch.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/nice-starfishes-itch.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
index 7217b81e87..3fe035e67d 100644
--- a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
@@ -17,7 +17,6 @@ import {
 import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../primitives/hooks';
 import type { PropsOfComponent } from '../styledSystem';
 import type { useFormControl as useFormControlUtil } from '../utils';
-import { useFormControlFeedback } from '../utils';
 import { OTPCodeControl, OTPInputDescription, OTPInputLabel, OTPResendButton, OTPRoot } from './CodeControl';
 import { useCardState } from './contexts';
 import type { FormFeedbackProps } from './FormControl';
@@ -32,20 +31,13 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
 
 const Root = (props: PropsWithChildren<FormControlProps>) => {
   const card = useCardState();
-  const { children, feedbackType, feedback, isFocused, isDisabled: isDisabledProp, ...restProps } = props;
-
-  /**
-   * Debounce the feedback before passing it inside the provider.
-   */
-  const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+  const { children, isDisabled: isDisabledProp, ...restProps } = props;
 
   const isDisabled = isDisabledProp || card.isLoading;
 
   const ctxProps = {
     ...restProps,
     isDisabled,
-    isFocused,
-    ...debouncedState,
   };
 
   return <FormFieldContextProvider {...ctxProps}>{children}</FormFieldContextProvider>;
@@ -163,13 +155,12 @@ const FieldLabelRow = (props: PropsWithChildren) => {
 };
 
 const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) => {
-  const { feedback, feedbackType, isFocused, fieldId } = useFormField();
-  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+  const { fieldId, debouncedFeedback } = useFormField();
 
   return (
     <FormFeedback
       {...{
-        ...debounced,
+        ...debouncedFeedback,
         elementDescriptors: props.elementDescriptors,
         id: fieldId,
       }}
diff --git a/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
index 028252adf3..a19a91509f 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
@@ -3,6 +3,7 @@ import type { FieldId } from '@clerk/types';
 import React from 'react';
 
 import type { useFormControl as useFormControlUtil } from '../../utils/useFormControl';
+import { useFormControlFeedback } from '../../utils/useFormControl';
 
 type FormFieldProviderProps = ReturnType<typeof useFormControlUtil<FieldId>>['props'] & {
   isDisabled: boolean;
@@ -13,13 +14,14 @@ type FormFieldContextValue = Omit<FormFieldProviderProps, 'id'> & {
   id?: string;
   fieldId?: FieldId;
   hasError: boolean;
+  debouncedFeedback: ReturnType<typeof useFormControlFeedback>['debounced'];
 };
 
 /**
  * Extract the context hook without the guarantee in order to avoid throwing errors if our field/form primitives are not wrapped inside a Field.Root component.
  * In case our primitives need to always be wrapped with Field.Root, consider updating the following line to [FormFieldContext, useFormField]
  */
-export const [FormFieldContext, _, useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
+export const [FormFieldContext, , useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
 
 export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFieldProviderProps>) => {
   const {
@@ -34,12 +36,23 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
     clearFeedback,
     children,
     feedbackType,
+    feedback,
+    isFocused,
     ...rest
   } = props;
   // TODO: This shouldnt be targettable
   const id = `${propsId}-field`;
 
-  const hasError = feedbackType === 'error';
+  /**
+   * Create a debounced version of the feedback.
+   */
+  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+
+  /**
+   * Both html attributes (e.g. data-invalid) and css styles depend on hasError being debounced
+   */
+  const hasError = debounced.feedbackType === 'error';
+
   /**
    * Track whether the `FormErrorText` has been rendered.
    * We use this to append its id the `aria-describedby` of the `input`.
@@ -60,6 +73,8 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       clearFeedback,
       setHasPassedComplexity,
       feedbackType,
+      feedback,
+      isFocused,
     }),
     [
       isRequired,
@@ -75,14 +90,21 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       clearFeedback,
       setHasPassedComplexity,
       feedbackType,
+      feedback,
+      isFocused,
     ],
   );
+
   return (
     <FormFieldContext.Provider
       value={{
         value: {
           ...value,
           ...rest,
+          /**
+           * Keep both debounced and regular feedback state inside the context
+           */
+          debouncedFeedback: debounced,
         },
       }}
     >
diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
index 7217b81e87..3fe035e67d 100644
--- a/packages/clerk-js/src/ui/elements/FieldControl.tsx
+++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx
@@ -17,7 +17,6 @@ import {
 import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../primitives/hooks';
 import type { PropsOfComponent } from '../styledSystem';
 import type { useFormControl as useFormControlUtil } from '../utils';
-import { useFormControlFeedback } from '../utils';
 import { OTPCodeControl, OTPInputDescription, OTPInputLabel, OTPResendButton, OTPRoot } from './CodeControl';
 import { useCardState } from './contexts';
 import type { FormFeedbackProps } from './FormControl';
@@ -32,20 +31,13 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
 
 const Root = (props: PropsWithChildren<FormControlProps>) => {
   const card = useCardState();
-  const { children, feedbackType, feedback, isFocused, isDisabled: isDisabledProp, ...restProps } = props;
-
-  /**
-   * Debounce the feedback before passing it inside the provider.
-   */
-  const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+  const { children, isDisabled: isDisabledProp, ...restProps } = props;
 
   const isDisabled = isDisabledProp || card.isLoading;
 
   const ctxProps = {
     ...restProps,
     isDisabled,
-    isFocused,
-    ...debouncedState,
   };
 
   return <FormFieldContextProvider {...ctxProps}>{children}</FormFieldContextProvider>;
@@ -163,13 +155,12 @@ const FieldLabelRow = (props: PropsWithChildren) => {
 };
 
 const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) => {
-  const { feedback, feedbackType, isFocused, fieldId } = useFormField();
-  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+  const { fieldId, debouncedFeedback } = useFormField();
 
   return (
     <FormFeedback
       {...{
-        ...debounced,
+        ...debouncedFeedback,
         elementDescriptors: props.elementDescriptors,
         id: fieldId,
       }}
diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
index 5a46dd2d66..a19a91509f 100644
--- a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
+++ b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
@@ -3,6 +3,7 @@ import type { FieldId } from '@clerk/types';
 import React from 'react';
 
 import type { useFormControl as useFormControlUtil } from '../../utils/useFormControl';
+import { useFormControlFeedback } from '../../utils/useFormControl';
 
 type FormFieldProviderProps = ReturnType<typeof useFormControlUtil<FieldId>>['props'] & {
   isDisabled: boolean;
@@ -13,12 +14,14 @@ type FormFieldContextValue = Omit<FormFieldProviderProps, 'id'> & {
   id?: string;
   fieldId?: FieldId;
   hasError: boolean;
+  debouncedFeedback: ReturnType<typeof useFormControlFeedback>['debounced'];
 };
+
 /**
  * Extract the context hook without the guarantee in order to avoid throwing errors if our field/form primitives are not wrapped inside a Field.Root component.
  * In case our primitives need to always be wrapped with Field.Root, consider updating the following line to [FormFieldContext, useFormField]
  */
-export const [FormFieldContext, _, useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
+export const [FormFieldContext, , useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
 
 export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFieldProviderProps>) => {
   const {
@@ -33,12 +36,23 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
     clearFeedback,
     children,
     feedbackType,
+    feedback,
+    isFocused,
     ...rest
   } = props;
   // TODO: This shouldnt be targettable
   const id = `${propsId}-field`;
 
-  const hasError = feedbackType === 'error';
+  /**
+   * Create a debounced version of the feedback.
+   */
+  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+
+  /**
+   * Both html attributes (e.g. data-invalid) and css styles depend on hasError being debounced
+   */
+  const hasError = debounced.feedbackType === 'error';
+
   /**
    * Track whether the `FormErrorText` has been rendered.
    * We use this to append its id the `aria-describedby` of the `input`.
@@ -59,6 +73,8 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       clearFeedback,
       setHasPassedComplexity,
       feedbackType,
+      feedback,
+      isFocused,
     }),
     [
       isRequired,
@@ -74,14 +90,21 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       clearFeedback,
       setHasPassedComplexity,
       feedbackType,
+      feedback,
+      isFocused,
     ],
   );
+
   return (
     <FormFieldContext.Provider
       value={{
         value: {
           ...value,
           ...rest,
+          /**
+           * Keep both debounced and regular feedback state inside the context
+           */
+          debouncedFeedback: debounced,
         },
       }}
     >