おおよそ以下のようなコードを書いていました。ユーザーの入力をpropsで受け取り変数に格納といった具合です。initaialMinuteの初期値は5であり、ユーザーの入力は9です。

export const MyTimer: FC<Props> = (props) => {
  const { initialMinute } = props;
  const initialSeconds: number = initialMinute * 60;
  const [totalSeconds, setTotalSeconds] = useState(initialSeconds);

  console.log(`totalSeconds=${totalSeconds}initialSeconds=${initialSeconds}`);

  return(
    <>

    </>
  )
}

コンソールにはinitialSeconds,totalSecondsそれぞれ同じ値が出力されることを予期していましたが、結果は

totalSeconds=300
initialSeconds=540

といった具合に、initialSecondsにのみユーザーの入力値が反映される結果となりました。

なぜなのか？

”useStateの初期化は、コンポーネント初回レンダリング時にのみ行われるから”というところになります。これに対してconstで宣言された変数はコンポーネントがレンダリングされるたびに再計算されます。
この違いを認識していなかったので理解できなすぎて時間を溶かしてしまいました、、、、

結論！

やはりドキュメントをよく読みましょうというところでしょうか、、、、