Please understatnd that this is the first post.

I'm developing a dashboard. But there's a problem.

I used to use setInterval, but I wrote a code that performs clearInterval when I press the button.

import React, {useEffect, useRef} from 'react';

const testInterval = () => { 
    const tick = useRef(null);

    useEffect(() => { 
        tick.current = setInterval(() => console.log("mounted."), 1000);

        return () => {
        console.log("unmounted.");
            
        if(!tick.current) {
           //PopupActions.hide();
        } else {
           clearRef(); 
        }
    };
 }, []);

    const clearRef = () => {
        clearInterval(tick.current);
        tick.current = null;
    }

    return (
        <div>
            /* problem
            <button onClick={clearRef}>blahblah</button>
            */
        </div>
    );
}

export default testInterval;

when I quickly return to the original page from the prev page and click the button, the clearInterval func will not work intermittently and will continue to output the log "mounted"

Why is this a problem? And how can we solve this?