Reactjs – Debounced function and useMemo, useCallback

Here is debounce function:

const debounce = (func, delay=1000) => {
    let timeoutId;

    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(()=>func(...args), delay);
    }
}

export default debounce

And here is useHomeOnIdle:

import { useCallback, useEffect, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import debounce from '../js/debounce'

const useHomeOnIdle = (time=5000) => {
    // If mouse is idle for 5 seconds, redirect to home page

    const navigate = useNavigate();
    const debouncedNavigate = debounce(navigate, time);
    //const debouncedNavigate = useCallback(() => debounce(navigate, time), [navigate, time]);
    //const debouncedNavigate = useMemo(()=>debounce(navigate, time), [navigate, time]);
    console.log('debouncedNavigate', debouncedNavigate);

    // useCallback to keep the same function reference for the event listener
    const mouseMoveHandler = useCallback(() => {
        debouncedNavigate('/');
    },[debouncedNavigate]);


    useEffect(() => {
        // Call once to start the timer when the component is mounted
        mouseMoveHandler();

        window.addEventListener('mousemove', mouseMoveHandler);

        return () => window.removeEventListener('mousemove', mouseMoveHandler);
    }, [mouseMoveHandler])
}
export default useHomeOnIdle

If I leave this as is in some case site goes to main page even if I move mouse constantly. This is due to rerenders and not cleaning up properly. And it looks like memoization debouncedNavigate solve the problem. Here is what I tried:

1.

const debouncedNavigate = useCallback(() => debounce(navigate, time), [navigate, time]);

This is not working at all and debouncedNavigate is:

() => debounce(navigate, time)

2.

const debouncedNavigate = useCallback(debounce(navigate, time), [navigate, time]);

This is working but eslint throws:

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.eslint

debouncedNavigate is:

debouncedNavigate (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(()=>func(...args), delay);
}

3.

const debouncedNavigate = useMemo(()=>debounce(navigate, time), [navigate, time]);

This is working and debouncedNavigate is:

debouncedNavigate (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(()=>func(...args), delay);
}

And there is no eslint warning

4.

const debouncedNavigate = useMemo(debounce(navigate, time), [navigate, time]);

This is not working at all and throws:

Uncaught TypeError: debouncedNavigate is not a function

Question:
So it looks like best option is 3. because it’s working and no warnings but should I use useMemo to memoize function? And why adding or removing ()=> from useMemo/useCallback make things work or not.
And it looks like:

useMemo(()=>debounce(navigate, time), [navigate, time]);

returns same value as:

useCallback(debounce(navigate, time), [navigate, time]);

I’m confused with this useMemo/useCallback usage