Remix error - Uncaught Error: Expected fetch controller: :R69l:

Question

I cannot figure out whats going wrong here. The error occurs intermittently on either page load or route change and I haven't been able to determine what causes it. Note that route changes and page loads to the same destination doesn't always throw this error, most of the time its fine then sometimes this error occurs:

Uncaught Error: Expected fetch controller: :rb:
    at invariant3 (history.ts:494:11)
    at abortFetcher (router.ts:2599:5)
    at router.ts:2122:44
    at Array.forEach (<anonymous>)
    at AbortSignal.abortPendingFetchRevalidations (router.ts:2122:28)
    at abortFetcher (router.ts:2600:16)
    at abortStaleFetchLoads (router.ts:2635:11)
    at handleFetcherAction (router.ts:2183:5)
  invariant3                       @ history.ts:494
  abortFetcher                     @ router.ts:2599
  (anonymous)                      @ router.ts:2122
  abortPendingFetchRevalidations   @ router.ts:2122
  abortFetcher                     @ router.ts:2600
  abortStaleFetchLoads             @ router.ts:2635
  handleFetcherAction              @ router.ts:2183
  await in handleFetcherAction (async)
  fetch2                           @ router.ts:1931
  (anonymous)                      @ index.tsx:1551
  (anonymous)                      @ index.tsx:1695
  (anonymous)                      @ MyComponent.tsx:51
  commitHookEffectListMount        @ react-dom.development.js:23150
  commitPassiveMountOnFiber        @ react-dom.development.js:24926
  commitPassiveMountEffects_complete @ react-dom.development.js:24891
  commitPassiveMountEffects_begin  @ react-dom.development.js:24878
  commitPassiveMountEffects        @ react-dom.development.js:24866
  flushPassiveEffectsImpl          @ react-dom.development.js:27039
  flushPassiveEffects              @ react-dom.development.js:26984
  (anonymous)                      @ react-dom.development.js:26769
  workLoop                         @ scheduler.development.js:266
  flushWork                        @ scheduler.development.js:239
  performWorkUntilDeadline         @ scheduler.development.js:533

The only common factor is that the error seems to happen when using a useFetcher in a useEffect to make a .submit() call to a resource route:

const fetcher = useFetcher();

useEffect(() => {
    fetcher.submit(
        null,
        {
            method: "post",
            action: "/some/route/"
        }
    );
}, [])

But, the data always gets fetched and the component renders as expected. Also note that this error occurs whether body is submitted or not as in the above example.

Any help with this would be greatly appreciated