Responsive Pomodoro timer in React/Material UI/TypeScript

I capped out the time to no more than 500 minutes which works out to be 8h and 20min and no less than 1 min. Also the progress updates every second. I tried to make it look as close to the Figma diagrams as possible.

Some of the debatable functionality I did was when the timer reaches 0 it won't go from say Pomodoro to Short Break automatically. The reason is on the Figma diagrams they have a screenshot of the timer with a "Restart" state when it reaches 0 seconds which would never occur if it advances to another tab. I tried to match the requirements as given even though I do agree it should go automatically to Short Break after it finishes at Pomodoro.

Hope to hear any feedback!