Timer(counter) из localstorage в useEffect

Идея в том, чтобы хранить время последней пересылки как таймстамп в локалсторадже. При заходе на страницу получать его и высчитывать разницу во времени. Есть счетчик, который отсчитывает 60 секунд. Если прошло меньше 60 секунд с момента первого рендера страницы - то показывать сколько времени прошло (например осталось 20 сек).

  const [counter, setCounter] = React.useState(60);

  React.useEffect(() => {
    const data = parseInt(localStorage.getItem('timer'));
    console.log(data);
    const now = new Date().getTime();
    console.log(now);
    const diff = (now - data) / 1000;
    console.log(Math.floor(diff));
    const ost = 60 - Math.floor(diff);
    setCounter(ost);
    return () => {
      // localStorage.setItem('timer', new Date().getTime());
      console.log('Unmount', ost);
    };
  }, []);

  React.useEffect(() => {
    localStorage.setItem('timer', new Date().getTime());
  });

  React.useEffect(() => {
    let timer;
    if (counter > 0) {
      timer = setTimeout(() => setCounter((c) => c - 1), 1000);
    }

    return () => {
      if (timer) {
        clearTimeout(timer);
      }
    };
  }, [counter]);

        <button >
          {!loading & (counter > 0) ? `Resend in ${counter}s` : 'Resend'}
        </button>

Как правильно записать item в localstorage при первой загрузке страницы, и получать его же при перезагрузке или переходе с другой страницы? В коде выше item при каждом обновлении страницы новый.