Here is the final code with everything working in case someone else comes back.

import {useState, useEffect} from "react";
import axios, {AxiosResponse} from "axios";

const useAxiosFetch = (url: string, timeout?: number) => {
    const [data, setData] = useState<AxiosResponse | null>(null);
    const [error, setError] = useState(false);
    const [errorMessage, setErrorMessage] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        let unmounted = false;
        let source = axios.CancelToken.source();
        axios.get(url, {
            cancelToken: source.token,
            timeout: timeout
        })
            .then(a => {
                if (!unmounted) {
                    // @ts-ignore
                    setData(a.data);
                    setLoading(false);
                }
            }).catch(function (e) {
            if (!unmounted) {
                setError(true);
                setErrorMessage(e.message);
                setLoading(false);
                if (axios.isCancel(e)) {
                    console.log(`request cancelled:${e.message}`);
                } else {
                    console.log("another error happened:" + e.message);
                }
            }
        });
        return function () {
            unmounted = true;
            source.cancel("Cancelling in cleanup");
        };
    }, [url, timeout]);

    return {data, loading, error, errorMessage};
};

export default useAxiosFetch;

move fetch function into useEffect, define controller top of fetch function and abort request when the id changed.

the mistake you made is you are returning cancel from your fetch function and also waiting for response from your fetch, so you can not access to it until your request take in place.

import React, { useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import axios from "axios";

const Test = () => {
  const router = useRouter();

  useEffect(() => {
    const abortController = new AbortController();

    const fectchData = async (sec) => {
      try {
        const res = await axios.get(`/api/test`, {
          signal: abortController.signal,
          params: { pid: router.query.pid, sec },
        });

        console.log(res.data);
      } catch (error) {
        console.log(error);
      }
    };

    fectchData(+router.query.pid * 1000);

    return () => {
      console.log("Cancel", router.query.pid);
      abortController.abort();
    };
  }, [router.query.pid]);

  return (
    <>
      <ul>
        <li>
          <Link href="/test?pid=1">test1</Link>
        </li>
        <li>
          <Link href="/test?pid=2">test2</Link>
        </li>
        <li>
          <Link href="/test?pid=5">test5</Link>
        </li>
      </ul>
    </>
  );
};

export default Test;

Since you are depending on useEffect to fire up your request, you can use the cleanup function of useEffect to cancel your API request before a new one is executed.

function App() {
    useEffect(() => {
        let CancelToken = axios.CancelToken;
        let source = CancelToken.source();
        async function getPairs() {
            try {

                const res = await axios.get('http://localhost:3000/binance/pairs?timeframe='+timeframe+'&strat='+strat, {
                    cancelToken: source.token
                });

                if (res.status === 200 || res.data.status === 'success') {
                    setPairs(res.data.pairs);
                    setReloadConfig(false);
                }
            }
            catch (err) {
                if (axios.isCancel(err)) {
                    console.log("cancelled");
                } else {
                throw err;
                }
            }
        }
    
        // reloadConfig is a React useState hook that is set to true when clicking a button 
        if (reloadConfig) {
            getPairs();
        }

        return () => {
             source.cancel('Cancelled due to stale request');
        }
    }, [reloadConfig]);
}

export default App;

Note that you should define your cancel variable within useEffect otherwise it will be re-initialzed to undefined on next render if you directly define it within the component.

To have a place to store a variable that behaves like an instance variable of the component, you can use useRef. It's a container for anything you want. You can store the CancelToken in there:

function Privacy(props) {
  const source = useRef(null);

  function getSource() {
    if (source.current == null) {
      const CancelToken = axios.CancelToken;
      source.current = CancelToken.source();
    }
    return source.current;
  }

  useEffect(() => {
    return () => {
      if (source.current != null) source.current.cancel();
    }
  }, [])

  // call `getSource()` wherever you need the Axios source
}

This is because you're losing the changes between renders. During the handleCreate call the variable changes only for that render. When the useEffect is run on a subsequent render/unmounting, you're resetting _zz to { qq: 'QQ' }. In order to get around this you need to use references.

export default function Form (props) {
  const cancelToken = useRef(null)
  const zz = useRef({ qq: 'QQ' })

  const handleCreate = async e => {
    e.preventDefault()

    cancelToken.current = axios.CancelToken.source() 
    zz.current = { qq: 'ZZ' }

    await axios.post('/form'), {}, { cancelToken: cancelToken.current.token })
  }

  useEffect(() => {
    return () => {
      console.log(zz.current) //this should now be {qq : 'ZZ'}
      if (cancelToken.current) {
        cancelToken.current.cancel()
      }
    }
  }, [])

  return null
}