React 18 - destroy is not a function

Question

My application was working fine, then I updated it to react 18, now it is throwing "destroy is not a function" when I navigate from one route to another if the current route is using useEffect to call some APIs on load. I searched the internet in this regard but every question is not regarding this issue. maybe react 18 is new thats why i cant find a solution.. Though when i reload that same page it loads perfectly. its just when i navigate the application crashes. And if i comment useEffect everything works fine

here is my useEffect Code

//on mount useEffect
  useEffect(async () => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };

and this is the error im getting

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)
safelyCallDestroy @ react-dom.development.js:22768
commitHookEffectListUnmount @ react-dom.development.js:22932
commitPassiveUnmountInsideDeletedTreeOnFiber @ react-dom.development.js:24874
commitPassiveUnmountEffectsInsideOfDeletedTree_begin @ react-dom.development.js:24824
commitPassiveUnmountEffects_begin @ react-dom.development.js:24732
commitPassiveUnmountEffects @ react-dom.development.js:24717
flushPassiveEffectsImpl @ react-dom.development.js:26847
flushPassiveEffects @ react-dom.development.js:26801
commitRootImpl @ react-dom.development.js:26752
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react_devtools_backend.js:3973 The above error occurred in the <Cases> component:

    at Cases (http://localhost:3000/static/js/bundle.js:5474:77)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react-dom.development.js:22768 Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)

Answer 1

Fixed it. removed async from useEffect and now it works fine.

//on mount useEffect
  useEffect(() => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };