[material-ui][Button] Hover animation glitches when component state changes

[ElsevarAsadov]

Steps to reproduce

    const [timer, setTimer] = useState(0);

  useEffect(() => {
        const interval = setInterval(()=>{
            if(timer < examTime){
                setTimer(x=>x+1000);
            }
            else{
                setIsExamFinished(true);
                dispatch({type: 'open-dialog', data:{title: 'Xəbərdarlıq',  message:'İmtahan Bitdi.'}})
                clearInterval(interval)
            }
        }, 1000)
        return () => {
            clearInterval(interval)
        };
    }, [timer]);
    
    this is basic timer which my app uses to show time.

Current behavior

The weird thing is every time whenever i change time state button hover animation restarts again and this looks so weird.

2024-03-04.03-11-14.mp4

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: button

[samuelsycamore]

Hi @ElsevarAsadov ! 👋 Can you share a reproduction of your code (Codesandbox or GH repo) with the problem you're facing so we can take a look? Also, can you explain what you mean by the animation "glitching"? It's not clear to me what's happening in the screen recording you shared.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.