No estoy seguro de estar haciendo esto correctamente, estoy recibiendo este error:

 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.

Estoy usando React/mecanografiado con la consulta React y Axios. Código hasta ahora:

 const [fetchData, setFetchData] = React.useState<IData[]>([]); const [displayData, setDisplayData] = React.useState<IData[]>([]); const queryKey = 'planes'; const getAlertsFunction = async (): Promise<any> => { const source = axios.CancelToken.source() await new Promise(resolve => setTimeout(resolve, 1000)) const response = await axios.get('https://xxxxx', { cancelToken: source.token }).then(res => res.data); setFetchData(response); setDisplayData(response); console.log('Latest response is', response); response.cancel = () => { source.cancel('Query cancelled') } return response; } const queryInfo: any = useQuery(queryKey, getAlertsFunction, { refetchOnWindowFocus: true, } ); useEffect(() => { console.log('Mounted'); return () => { console.log('Un-mounted'); axios.CancelToken.source() }; }, [displayData]);

No estoy del todo seguro de lo que se debe pasar al enlace useEffect para evitar este error y la limpieza.