I need show my timer in react component, he working in function but i can't show his in html because my state very bad working.

const date = { // timer context
    hours: 0,
    minutes: 0,
    seconds: 0,
    isActive: false,
    start: function() {
      this.isActive = true;
      return this
    },
    stop: function() {
      this.isActive = false;
      return this
    }
  }

  function timer() { //timer function

    if(this.isActive) {
      if(this.seconds < 60) date.seconds += 1;
      else {
        this.seconds = 0;
        if(this.minutes < 60) date.minutes += 1;
        else {
          this.minutes = 0;
          this.hours += 1;
        }
      }
    }

    return this

  }

  const myTimer = timer.bind(date);
  const [timerState, setTimerState] = useState({}); // myState
  let interval;

  useEffect(() => {
    if(interval) clearInterval(interval);
    interval = setInterval(() => {
      if(clients.length > 1) {
          setTimerState(myTimer().start()); // state changed
      } else {
        setTimerState(myTimer().stop());
      }
      console.log(timerState);
    }, 1000);
  }, [clients, timerState /* waiting update states */]); // but i can't wait only clients otherwise i get empty object {} if remove timerState from wait states

I need withdraw timer state in html component return ({timerState})

Tell me please what i need. Thanks.