fix(striker-ui): run 'set validity on first render' in useEffect

striker-ui/components/InputWithRef.tsx

@@ -5,6 +5,7 @@ import {
   forwardRef,
   ReactElement,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useState,
@@ -166,6 +167,14 @@ const InputWithRef = forwardRef(
       [initOnFocus, inputTestBatch],
     );
 
+    /**
+     * Using any setState function synchronously in the render function
+     * directly will trigger the 'cannot update a component while readering a
+     * different component' warning. This can be solved by wrapping the
+     * setState call(s) in a useEffect hook because it executes **after** the
+     * render function completes.
+     */
+    useEffect(() => {
       if (isFirstRender) {
         const isValid =
           testInput?.call(null, {
@@ -175,6 +184,7 @@ const InputWithRef = forwardRef(
 
         onFirstRender?.call(null, { isValid });
       }
+    }, [input.props.id, inputValue, isFirstRender, onFirstRender, testInput]);
 
     useImperativeHandle(
       ref,

striker-ui/components/ManageUps/AddUpsInputGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useMemo, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { BLACK } from '../../lib/consts/DEFAULT_THEME';
 
@@ -142,11 +142,13 @@ const AddUpsInputGroup = <
     ],
   );
 
+  useEffect(() => {
     if (isFirstRender) {
       buildInputFirstRenderFunction(INPUT_ID_UPS_TYPE)({
         isValid: Boolean(inputUpsTypeIdValue),
       });
     }
+  }, [buildInputFirstRenderFunction, inputUpsTypeIdValue, isFirstRender]);
 
   return content;
 };