halp: using hooks for form validation, losing state

I've been playing around with the hooks api and I went to work building out a form validation hook.

The goal here would be to be glue between the browser's constraint validation api, custom validation functions [which have access to the entire form state] and react-strap for making it look nice.

I've got a working prototype here: https://codesandbox.io/s/rllw0jyzx4?fontsize=14

There's really two things here -- the useForm hook that keeps track of all the form elements and does validations on submit, and a FormInput component that wraps custom browser validation logic.

I'm not entirely sure if I'm doing things the right or wrong way. I have a few concerns with what I've done here:

1. the form field is pretty heavy in terms of what's in there -- there's a lot of logic around validating and interfacing with the browser apis. I suppose it has to go somewhere but it seems like a lot of stuff going on in there.
2. I needed to use context to provide register and unregister routines that would let the form hook know about new entries... and also a get_form_data routine that would return the state of the form for validation functions.
3. there's some interesting timing issues with the onChange handler, and state fields not being available in the useForm hook's get_form_data routine. I ended up doing a useEffect listening to value, and invoke validation from there.... it works, but it needs to go after use useEffect that registers the FormInput.... seems a bit greasy.

While the whole thing seems to work pretty well -- it showing the browser's validation messages for things like min-length and required, and allow for custom async validation -- it has a bug that I'm not sure how to fix.

Once the form is submitted, I have a few state variables from another hook for async routines, loading, error that sort of thing. When the request is started, I get new state variables here and because my form hook is re-rendered, I end up losing the state of each of the form inputs and they go back to their initial blank state.

I'm curious if anyone has any insights, maybe better ways to architect this, or tips on how to persist the state so a re-render doesn't blow everything away.