fix: error message overlap

Author: ankit-tailor

src/components/composites/FormControl/FormControlErrorMessage.tsx

@@ -6,6 +6,7 @@ import { useFormControlContext } from './useFormControl';
 import type { IFormControlErrorMessageProps } from './types';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { combineContextAndProps } from '../../../utils';
+import Text from '../../primitives/Text';
 
 const FormControlErrorMessage = (
   props: IFormControlErrorMessageProps,
@@ -73,7 +74,7 @@ const FormControlErrorMessage = (
     <Box nativeID={resolvedProps?.helpTextId} {...resolvedProps} ref={ref}>
       <HStack {..._stack}>
         {startIcon}
-        <Box _text={_text}>{children}</Box>
+        <Text {..._text}>{children}</Text>
         {endIcon}
       </HStack>
     </Box>