How to properly combine debounce and cancel token?

Question

React

There is an option with cancel token that works:

useEffect(() => {
    const asyncEnrollment = async () => {
      const data = { userId, filter };
      setLoading(true);
      await initialEnrollment(dispatch, data);
      setLoading(false);
    };

    asyncEnrollment();
  }, [dispatch, userId, filter]);

There is a version with debounce, which also works, but cancel token does not work:

const loadEnrollment = useRef(
  debounce(async (data) => {
    setLoading(true);
    await initialEnrollment(dispatch, data);
    setLoading(false);
  }, 4000)
);

useEffect(() => {
  const data = { userId, filter };
  loadEnrollment.current(data);
}, [userId, filter]);

Separately they work, together they don't.
How to combine them?