useEffect cleanup on ‘imported’ async function

Please don’t consider this a duplicate. I have searched many blogs and stuffs but haven’t reached to the solution.

First of all, my question is ‘how to resolve react state change in unmounted component error, and cancel an async function call that is imported within the useEffect hook?’

I know that you can resolve ‘state changed in an unmounted component‘ error by using clean up function in useEffect. In the cases of async call within useEffect hook, you can do clearTimeout, use cancel token for Axios, create [isMounted] state to flag mounted/unmounted state, and etc. So, at least, I know how to veil the react warning

However, my boss wants not only veiling the warning but also cancelling the async request. Here’s the simplified version of code.

import { fetchFunction } from '../../../somewhereInTheDir';

function Page() {
  const [data, setData] = useState([]);
  const [isMounted, setIsMounted] = useState(true);

  async function fetchData() {
    try {
      const data = await fetchFunction(someUri);

      setData(data);
    } catch (error) {
      console.warn(error);
    }
  }

  useEffect(() => {
    if(isMounted) {
      fetchData(ENDPOINT);
    }
    
    return () => {
      setIsMounted(false);
    }
  })
}

The isMounted state veils the warning. So I am seeing nothin in the console, which is a good sign. But this code does not block/cancel data coming from the endpoint when Page component is unmounted. And you cannot use strategies like putting cancel token in the http header, because fetchFunction is from outside.

ps. my boss said using isMounted state as if it were a JavaScript variable could be an anti-pattern from React, since React state change leads to a re-rendering. Is there a better way to veil the warning without using isMounted state?