Not sure I am doing this correct, I am getting this 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.

I am using React/typescript with React query and Axios. Code so far:

    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]);

I am not entirely sure what needs to be passed into the useEffect hook to avoid this error and cleanup.