Как передать состояние из компонента в другое состояние для хранения?

Question

[historydev]

Здравствуйте. Знаю что гуглится - контексты, пропсы и прочее, но у меня функции и не понимаю как это реализовать конкретно здесь. Я пробую через callback функцию вот таким образом:

const [timerData, setTimerData] = useState({
    seconds: 0,
    minutes: 0,
    hours: 0
  });

  const callBackTimer = useCallback(setTimerData, [timerData]);

  useEffect(() => {
    console.log(timerData);
  },[timerData])

  const Timer = ({callback, data}) => {
    const [seconds, setSeconds] = useState(data.seconds);
    const [minutes, setMinutes] = useState(data.minutes);
    const [hours, setHours] = useState(data.hours);
    const [isActive, setIsActive] = useState(clients.length > 1);

    let toggle = () => {
      setIsActive(!isActive)
    }

    let reset = () => {
      setSeconds(0);
      setIsActive(false);
    }

    useEffect(() => {
      let interval = null;
      if (isActive) {
        interval = setInterval(() => {
          if(seconds < 60) setSeconds(seconds => seconds + 1);
          else {
            setSeconds(0);
            if(minutes < 60) setMinutes(minutes => minutes + 1);
            else {
              setMinutes(0);
              setHours(hours => hours + 1);
            }
          }
          console.log({hours, minutes, seconds}); // Если убрать строку ниже, выводит всё корректно
          callback({hours, minutes, seconds}); // Прокидываю в мою функцию но получаю объект где всё по нулям
        }, 1000);
      } else if (!isActive && seconds !== 0) {
        clearInterval(interval);
      }
      return () => clearInterval(interval);
    }, [isActive, seconds, minutes, hours, timerData]);

    return (
        <div className={'timer'}>
          <h1>{seconds}</h1>
          <h1>{minutes}</h1>
          <h1>{hours}</h1>
        </div>
    )
  }

<Timer callback={callBackTimer} data={timerData}/> // Вызываю вот так

Подскажите как я могу это реализовать?
Спасибо.