I am using react final form library in my Next.js application. I wanted to update some states if there are errors encountered on form fields. However, I am getting this error in browser console:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

import { Form } from 'react-final-form'


// react state
const [stateValue, setStateValue] = useState<any>({})


// react final form
<Form
      onSubmit={onSubmit}
      mutators={{ ...arrayMutators }}
      initialValues={initialValues}
      validate={(values: ProductFormValueTypes) => {
         let errors = {}
         errors = { <object from form fields> }
         if(condition) setStateValue({<some value>})

         return errors
      }}
/>