pass useCallback function to Formik innerRef?

[mdecurtins]

I'm wondering if anyone has experience passing a callback from useCallback to Formik's innerRef prop.

Currently, I have the following, and it works for triggering Formik submission from outside the <Formik> component, but I'm struggling with updating isSavingDisabled based on changes to Formik's isValid state, because React refs don't trigger useEffect when specified as a dependency.

const MyModal = () => {

  const [isSavingDisabled, setSavingDisabled] = useState( false )
  const formikRef = useRef()

  const doSave = () => {
    if ( formikRef.current ) {
      formikRef.current.handleSubmit()
    }
  }

  return (
    <Modal>
      <ModalHeader>My Modal Header</ModalHeader>
      <ModalBody>
        <Formik innerRef={formikRef} {...formikProps}>
          { /* Form body */ }
        </Formik>
      </ModalBody>
      <ModalFooter>
        <Button disabled={isSavingDisabled} onClick={doSave}>
          Save
        </Button>
      </ModalFooter>
    </Modal>
  )
}

I need to: 1) preserve a reference to handleSubmit so I can call it from outside the <Formik> component, but also 2) listen for changes to the isValid property of Formik's state.

I've seen that useCallback, possibly paired with useState, can be used instead of useRef, but I'm running into a render loop. Can anyone point me in the right direction? Thanks in advance!

[mdecurtins]

It turns out that using the useFormik hook with the FormikProvider context provider as described here (#2746) does exactly what I'm looking for. I spent hours searching for a solution and some documentation of this "pattern" of Formik usage would have been incredibly helpful.