Warning on Reactjs routes

Question

I have the following custom route configuration

 <BrowserRouter>
            <Switch>
                <IntroducingLayoutRoute exact path="/" component={Main} />
                <IntroducingLayoutRoute path="/about" component={About} />
                <IntroducingLayoutRoute path="/register" component={Register} 

Introducinglayout

const IntroducingLayout = ({ children }) => (                         
    <>
        <Header />
        <Menu />
        
        {children}
        
        <Footer />
    </>
  );  
  
  const IntroducingLayoutRoute = ({component: Component, ...rest}) => {  
    return (  
      <Route {...rest} render={matchProps => (  
        <IntroducingLayout>  
            <Component {...matchProps} />  
        </IntroducingLayout>  
      )} />  
    )  
  };  

Now every time I click on a route I get this warning

In the archive

index.js:1 Warning: Can’t perform a React state update on an unmounted Component. This is a no-op, but it indicates a memory Leak in your application. To fix, Cancel all subscriptions and asynchronous tasks in a useEffect Cleanup Function. in Home (at Introducing/index.js:31)

I tried to use it like this:

const mountedRef = useRef(true)

    const execute = useCallback(() => {
      setLoading(true)
      return asyncFunc()
        .then(res => {
          if (!mountedRef.current) return null
          setData(res)
          return res
        })
    }, [])
  
    useEffect(() => {
      return () => { 
        mountedRef.current = false
      }
    }, [])

But it wasn’t