diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
index 1573ffa..4c5a01e 100644
--- a/src/components/Input/Input.test.tsx
+++ b/src/components/Input/Input.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { fireEvent, render } from '../../test-utils';
+import { fireEvent, render, waitFor } from '../../test-utils';
 import theme from '../../theme';
 import Input, { TextInputHandles } from './Input';
 
@@ -115,7 +115,7 @@ describe('Input', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  test('should focus input correctly', () => {
+  test('should focus input correctly', async () => {
     // when
     const { getByTestId } = render(<Input label="label" />);
 
@@ -125,14 +125,14 @@ describe('Input', () => {
     );
 
     // when
-    act(() => {
-      fireEvent(getByTestId('input'), 'onFocus');
-    });
+    fireEvent(getByTestId('input'), 'onFocus');
 
     // then
-    expect(getByTestId('input-box').props.style[0].borderColor).toBe(
-      theme.colors.primaryKey,
-    );
+    await waitFor(() => {
+      expect(getByTestId('input-box').props.style[0].borderColor).toBe(
+        theme.colors.primaryKey,
+      );
+    });
   });
 
   test('should not focus and blur input when input is disabled', () => {
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 05c76b5..51cc918 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -175,11 +175,13 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       }
     }, [error, success, icon]);
 
-    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
-      startAnimation();
+      await startAnimation();
 
       setFocused(true);
       setVariantIconName(null);
@@ -189,13 +191,15 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       rest.onFocus?.(e);
     };
 
-    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
 
       if (!value) {
-        stopAnimation();
+        await stopAnimation();
       }
 
       setFocused(false);
diff --git a/src/components/Input/hooks.ts b/src/components/Input/hooks.ts
index 42c2d39..36b6db7 100644
--- a/src/components/Input/hooks.ts
+++ b/src/components/Input/hooks.ts
@@ -117,39 +117,43 @@ export const useOutlineLabelVisibility = ({
   ).current;
 
   /* istanbul ignore next */
-  const startAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionFillValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize - 2,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue - 2,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const startAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionFillValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize - 2,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue - 2,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   /* istanbul ignore next */
-  const stopAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionEmptyValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const stopAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionEmptyValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   let viewHeight = inputHeight + 6;
diff --git a/src/components/TextArea/TextArea.test.tsx b/src/components/TextArea/TextArea.test.tsx
index 8a58a8d..68ec33b 100644
--- a/src/components/TextArea/TextArea.test.tsx
+++ b/src/components/TextArea/TextArea.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { fireEvent, render } from '../../test-utils';
+import { fireEvent, render, waitFor } from '../../test-utils';
 import theme from '../../theme';
 import TextArea, { TextInputHandles } from './TextArea';
 
@@ -81,7 +81,7 @@ describe('TextArea', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  test('should focus TextArea correctly', () => {
+  test('should focus TextArea correctly', async () => {
     // when
     const { getByTestId } = render(<TextArea label="label" />);
 
@@ -91,14 +91,14 @@ describe('TextArea', () => {
     );
 
     // when
-    act(() => {
-      fireEvent(getByTestId('textArea'), 'onFocus');
-    });
+    fireEvent(getByTestId('textArea'), 'onFocus');
 
     // then
-    expect(getByTestId('textArea-box').props.style[0].borderColor).toBe(
-      theme.colors.primaryKey,
-    );
+    await waitFor(() => {
+      expect(getByTestId('textArea-box').props.style[0].borderColor).toBe(
+        theme.colors.primaryKey,
+      );
+    });
   });
 
   test('should not focus and blur TextArea when TextArea is disabled', () => {
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index 2fbd8a4..37b140e 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -135,11 +135,13 @@ const TextArea = forwardRef<TextInputHandles, TextAreaProps>(
       setErrorState(error);
     }, [error]);
 
-    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
-      startAnimation();
+      await startAnimation();
 
       setFocused(true);
       setErrorState(false);
@@ -147,13 +149,15 @@ const TextArea = forwardRef<TextInputHandles, TextAreaProps>(
       rest.onFocus?.(e);
     };
 
-    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = async (
+      e: NativeSyntheticEvent<TextInputFocusEventData>,
+    ) => {
       if (disabled || !editable) {
         return;
       }
 
       if (!value) {
-        stopAnimation();
+        await stopAnimation();
       }
 
       setFocused(false);
diff --git a/src/components/TextArea/hooks.ts b/src/components/TextArea/hooks.ts
index 38a4513..7f3899a 100644
--- a/src/components/TextArea/hooks.ts
+++ b/src/components/TextArea/hooks.ts
@@ -90,39 +90,43 @@ export const useOutlineLabelVisibility = ({
   ).current;
 
   /* istanbul ignore next */
-  const startAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionFillValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize - 2,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue - 2,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const startAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionFillValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize - 2,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue - 2,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   /* istanbul ignore next */
-  const stopAnimation = () => {
-    Animated.parallel([
-      Animated.timing(labelPositionRef, {
-        toValue: labelPositionEmptyValue,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(fontSizeRef, {
-        toValue: labelFontSize,
-        ...commonAnimatedProps,
-      }),
-      Animated.timing(lineHeightRef, {
-        toValue: labelLineHeightValue,
-        ...commonAnimatedProps,
-      }),
-    ]).start();
+  const stopAnimation = async () => {
+    return new Promise(res => {
+      Animated.parallel([
+        Animated.timing(labelPositionRef, {
+          toValue: labelPositionEmptyValue,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(fontSizeRef, {
+          toValue: labelFontSize,
+          ...commonAnimatedProps,
+        }),
+        Animated.timing(lineHeightRef, {
+          toValue: labelLineHeightValue,
+          ...commonAnimatedProps,
+        }),
+      ]).start(res);
+    });
   };
 
   let viewHeight = textAreaHeight + 6;