How to lift Formik "dirty" value/state up to parent component?

Question

Parent Component

const Parent = () => {
 const [dirty, setDirty] = useState(false)
 return (
    <ChildComponent setDirty={setDirty} />
 ) 
}

ChildComponent.js

...
  <Formik initialValues={initialValues} onSubmit={onSubmitHandler} validationSchema={schema}>
      {({ values, setFieldValue, handleSubmit, dirty }) => {
        setDirty(dirty)
        return (
          <Form onSubmit={handleSubmit}>
...

This is giving me an error with the setState but I am getting the intended result. I am passing setDirty prop from a parent component and want to "lift" the dirty state up because the parent component is rendering a modal based on this form's dirty state.

What is the correct syntax or way to lift this dirty state up to the parent?

Answer 1

Found the answer here: setState called in render prop is causing a react warning

I needed to wrap the setDirty in a setTimeout