diff --git a/renderer/components/Form/Input.js b/renderer/components/Form/Input.js
index fd4e488fc5e..bd4a6eb6de1 100644
--- a/renderer/components/Form/Input.js
+++ b/renderer/components/Form/Input.js
@@ -77,8 +77,6 @@ const Input = ({
       <Flex alignItems="center">
         {type === 'search' && <SearchIcon width={iconSize} />}
         <StyledInput
-          {...otherProps}
-          ref={forwardedRef}
           disabled={isDisabled}
           fieldState={fieldState}
           maxLength={maxLength}
@@ -113,6 +111,8 @@ const Input = ({
           theme={theme}
           type={type}
           value={getValue()}
+          {...otherProps}
+          ref={forwardedRef}
         />
         {children}
       </Flex>
diff --git a/renderer/components/Form/TextArea.js b/renderer/components/Form/TextArea.js
index a48e70674df..1e4b1edbe56 100644
--- a/renderer/components/Form/TextArea.js
+++ b/renderer/components/Form/TextArea.js
@@ -61,8 +61,6 @@ const TextArea = ({
         </InputLabel>
       )}
       <StyledTextArea
-        {...otherProps}
-        ref={forwardedRef}
         disabled={isDisabled}
         fieldState={fieldState}
         name={field}
@@ -93,6 +91,8 @@ const TextArea = ({
         required={isRequired}
         theme={theme}
         value={getValue()}
+        {...otherProps}
+        ref={forwardedRef}
       />
       {description && (
         <Text color="gray" fontSize="s" mt={1}>