Failing to update a state variable in a React Functional Component

1

In the code below i want to start a countdown after clicking the button but the state variables are not updating.

import React,{useState} from 'react';
import ReactDOM from 'react-dom';

function Main(){
    let[time, setTime] = useState(25);
    let[milliseconds, setMilliseconds] = useState(time * 60 * 1000);
    let[minutes, setMinutes] = useState(Math.floor(milliseconds/60000));
    let[seconds, setSeconds] = useState((milliseconds % 60000)/1000);
    const onClickHandler = () => {
        setMilliseconds(milliseconds - 1000);
        setMinutes(Math.floor(milliseconds/60000));
        setSeconds((milliseconds % 60000)/1000)
    }
    const onClickTrigger = () => {setInterval(onClickHandler, 1000)}
    return(
      <div>
          <h1> Count Down </h1>
          <Timer 
              seconds = {seconds}
              minutes = {minutes}
              onClickHandler = {onClickTrigger}
          />
      </div>
    )
}
const Timer = (props) => {
       return(
         <React.Fragment>
              <p> 
                    {props.minutes.toString().padStart(2, '0')} :  
                    {props.seconds.toString().padStart(2, '0')}
              </p>
              <button onClick = {props.onClickHandler} > Click </button>
         </React.Fragment>
       ) 
    }
ReactDOM.render(<Main />, document.getElementById('root'));

What could be the problem?
This is the HTML code

<body>
      <div id="root"> </div>
</body>

You can try it on On Scrimba. I want the countdown to start after clicking the button.

2 
const onClickTrigger = () => {setInterval(onClickHandler, 1000)}

You cannot do this, it’s wholly at odds with how React works.

Edit: also, once you’ve fixed the interval, avoid doing this:

    let[time, setTime] = useState(25);
    let[milliseconds, setMilliseconds] = useState(time * 60 * 1000);
    let[minutes, setMinutes] = useState(Math.floor(milliseconds/60000));
    let[seconds, setSeconds] = useState((milliseconds % 60000)/1000);
    const onClickHandler = () => {
        setMilliseconds(milliseconds............etc etc

You are literally just printing a string like min:sec (and I assume was going to be min:sec:ms). You don’t need anything else apart from a function to convert Date object -> how you want the time formatted (either this is done in the parent & the string passed to the timer, or the date passed to the timer and converted there, either is fine. You definitely dont need this very complex tracking of numbers all depending on one another (which will inevitably cause the timer to drift wildly off course).