React warning: Cannot update a component while rendering a different component when using ...text in child component

[karenpeng]

I have a use case that I have to pass formState and text from parent to child component:

const Child = ({text, formState}) => {
  return (
     <input {...text('name')} />
  );
}
const Parent = () => {
  const [formState, { text }] = useFormState<QueryHistoryFilterFormState>(filters);
 return (
   <Child text={text} formState={formState}/>
 );
}

However, this will cause warnings since React v16.3.0 because the Child is setting state during render. See more explanations in: https://gorannikolovski.com/blog/cannot-update-a-component-while-rendering-a-different-component-react-native.

Any suggestions or workarounds?