fix: WIP Swap to ref based checks

Currently not reading properly on useEffect cleanup, got to work out why formSpyRef isn't properly read in unblock cleanup function

lib/hooks/useErmForm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { useHistory } from 'react-router-dom';
@@ -13,28 +13,35 @@ const focusOnErrors = createDecorator();
 const useErmForm = ({ navigationCheck = true } = {}) => {
   const [openModal, setOpenModal] = useState(false);
   const [nextLocation, setNextLocation] = useState(null);
-  const [dirty, setDirty] = useState(false);
-  console.log('openModal %o', openModal);
-  console.log('nextLocation %o', nextLocation);
-  console.log('dirty %o', dirty);
+
+  const formSpyRef = useRef();
+
   const history = useHistory();
   const intl = useIntl();
 
   useEffect(() => {
     if (navigationCheck) {
+      // Is this whole history.unblock a stale function? Maybe have the whole thing in state or ref?
       const unblock = history.block((nextLoc) => {
-        const shouldPrompt = dirty && !nextLoc;
+        // Due to stale closure probolems, grab current state from "state updator" pattern
+        console.log("FORMSPYREF (FIRST): %o", formSpyRef);
+        const shouldPrompt = !!formSpyRef.current && formSpyRef.current.dirty && !formSpyRef.current.submitSucceeded && !formSpyRef.current.submitting;
+        console.log("FORMSPYREF: %o", formSpyRef);
+        console.log("shouldPrompt: %o", shouldPrompt);
 
         if (shouldPrompt) {
           setOpenModal(true);
           setNextLocation(nextLoc);
         }
+
         return !shouldPrompt;
       });
       return unblock;
     }
-    return () => { };
-  }, [history, navigationCheck, dirty]);
+
+    return () => {
+    };
+  }, [history, navigationCheck]);
 
   // const continueNavigation = (ctx) => {
   //   const { pathname, search } = nextLocation;
@@ -64,15 +71,17 @@ const useErmForm = ({ navigationCheck = true } = {}) => {
           <>
             <FinalForm
               {...formOptions}
-              decorators={[focusOnErrors, ...formOptions.decorators || []]}
+              decorators={[focusOnErrors, ...(formOptions.decorators || [])]}
               initialValues={initialValues}
               mutators={{ ...formOptions.mutators, ...arrayMutators }}
               onSubmit={onSubmit}
               render={(formProps) => (
                 <>
                   <FormComponent {...formProps} />
                   <FormSpy
-                    onChange={(state) => setDirty(state.dirty)}
+                    onChange={state => {
+                      formSpyRef.current = state;
+                    }}
                     subscription={{
                       dirty: true,
                       submitSucceeded: true,