Reactでconstにセットした値が取得できない

実現したいこと

constのuseStateでセットしたtokenの中身を正常にセットする

前提

TypeScriptでサーバと通信する簡易的なTodoシステムを作っています。
そこでサーバと通信する機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Authorization: `Token ${token}`

以下のコードの上記の部分でtokenの中身が''になってしまいます。

該当のソースコード

typescript
1import React, {useEffect, useState} from 'react';
2import {InputToDo, ToDo} from './index';
3import axios from "axios";
4
5export class RoutineTask {
6    id: number
7    name: string
8
9    constructor(id: number, name: string) {
10        this.id = id
11        this.name = name
12    }
13}
14export const ToDoApp = () => {
15    const [token, setToken] = useState<string>("");
16    // stateを作成
17    const [todos, setToDos] = useState<RoutineTask[]>([]);
18    // 入力値をtodos(配列)に設定
19
20    const syncRoutineTasksWithServer = () => {
21        axios.get("/routine_tasks",{
22            headers: {
23                Authorization: `Token ${token}`
24            }
25        }).then((response) => {
26            const routine_tasks = response.data.map((value: any) => {
27                return new RoutineTask(value.id, value.name);
28            })
29            setToDos(routine_tasks);
30        });
31    }
32
33    const getUserToken = async () => {
34        let token = localStorage.getItem("token");
35        if (!token){
36            const response = await axios.post("/users");
37            token = response.data.token
38            localStorage.setItem("token", token || "");
39        }
40        setToken(token || "")
41    };
42
43    useEffect(() => {
44        getUserToken().then(() => {
45            syncRoutineTasksWithServer();
46        })
47    }, [])
48
49    const addRoutineTask = (routine_task: RoutineTask) => {
50        setToDos([...todos, routine_task]);
51    };
52
53    return (
54        <div className="panel is-warning">
55            <div className="panel-heading">
56                ToDo
57            </div>
58            <InputToDo addRoutineTask={addRoutineTask} token={token}/>
59            {todos.map(todo => (
60                <ToDo
61                    key={todo.id}
62                    routine_task={todo}
63                    syncRoutineTasksWithServer={syncRoutineTasksWithServer}
64                    token={token}
65                />
66            ))}
67        </div>
68    );
69}
70export default ToDoApp;

試したこと

ブレークポイントを設置し、setToken(token || "")の部分でtokenに正常な中身が設定されていることを確認しました。
またAuthorization: `Token ${token}の部分よりも先にsetToken(token || "")が呼ばれていることを確認しました。
ただ何故か2度呼び出されているのは気になっています。
またconst [token, setToken] = useState<string>("")にもブレークポイントを設置したところ、まず先にここが２度呼ばれてその後、setToken(token || "")が２度呼ばれて、その後なぜかconst [token, setToken] = useState<string>("")が再度２度呼ばれて、その後Authorization: `Token ${token}が２度呼ばれるという現象を確認しています。
私の推測ではconst [token, setToken] = useState<string>("")が呼ばれたせいで値が初期化されてしまっている可能性があると思っているのですが、なぜここが４度も呼ばれるか原因がわかっていないので対処できておりません。