【React】API通信の際に、URLに埋め込んでいる変数に更新が反映されない。

ReactとLaravelでLINE風のチャットアプリを作成中です。

実現したい事

チャット画面で、一番下までスクロールしたらさらに過去のチャット履歴を読み込む機能を実装しています。
仕組みを理解するために、無限スクロール用のライブラリ等は使わずに実装中です。

詰まっているところ

React側で一番下までスクロールして次に読み込む「ページ」を変数pageとして保持しています。
それを、スクロールイベントハンドラでAPI通信する際のURLに渡しています。
しかし、1ページ目を読み込んだ後、最下部までスクロールしてスクロールイベント発火させAPI通信したURL
を確認すると1ページ目を取りに行ってしまいます。

ソースコード

React
1function MessageView(props) {
2    //roomidに所属するメンバーのchatlogを表示。
3    const ChatContainerStyle = {
4        width: '300px',
5        height: '300px',
6        border: 'none',
7        overflowY: 'scroll'
8    }
9
10    const RoomId = props.RoomId;
11    const [Chats, setChats] = useState([]);
12
13    //取得してきたデータの変数で保持。
14    let page = 1;
15    const handleScroll = (event) => {
16        // console.log(Math.ceil(event.target.scrollHeight - event.target.scrollTop));
17        if (isScrolledBottom(event)) {
18            fetchMessages();
19        }
20    }
21    //要素が完全にスクロールされたかどうかを判定
22    const isScrolledBottom = (event) => {
23        return Math.ceil(event.target.scrollHeight - event.target.scrollTop) === event.target.clientHeight
24    }
25　　//API通信
26    async function fetchMessages() {
27        const data = await axios.get
28            (
29                `/api/room/${RoomId}/messages/${page}`,
30            )
31            .then((res) => {
32                // handle success
33                const json_data = res.data.data;
34                console.log(json_data.messages);
35                addChatLog(json_data.messages);
36                updatePageNum(json_data.current_page + 1);
37            })
38            .catch((error) => {
39                // handle error
40                console.log(error);
41            })
42    }
43　　//ページ数を更新
44    const updatePageNum = (nextpage) => {
45        page = nextpage;
46        console.log('upadatePageNum');
47        console.log(page);
48    }
49　　//Room切り替え時に、ページリセット用
50    const resetPageNum = () => {
51        page = 1;
52        console.log('resetPageNum');
53        console.log(page);
54    }
55
56    
57    const addChatLog = (newdata) => {
58        setChats([...Chats, ...newdata]);
59        console.log('addChatLog');
60    }
61    const clearChatLog = () => {
62        setChats(Chats.splice(0, Chats.length));
63        console.log(Chats);
64    }
65
66
67    useEffect(() => {
68        console.log('E');
69        clearChatLog();
70        resetPageNum();
71        fetchMessages();
72    }, [RoomId]);
73
74    return (
75        //ログイン中のユーザーIDとchatのuserIdが同じならright属性付与、それ以外はleft属性。
76        <React.Fragment>
77            <h2>Room{RoomId}のチャット</h2>
78            <div className="chat_container" onScroll={handleScroll} style={ChatContainerStyle}>
79                <div className="chat_title">
80                    <div className="chat_main">
81                        {Chats.map((chat) => {
82                            if (loginUserId == chat.user_id) {
83                                return (
84                                    <div key={chat.message_id} className="chat_content_right">
85                                        <div className="room">{chat.room_id}</div>
86                                        <div className="id">{chat.message_id}</div>
87                                        <div className="text">{chat.contents}</div>
88                                        <div className="date">{chat.posted_at}</div>
89                                    </div>
90                                )
91
92                            } else {
93                                return (
94                                    <div key={chat.message_id} className="chat_content_left">
95                                        <div className="content_wrapper_left">
96                                            <div className="room">RoomID:{chat.room_id}</div>
97                                            <div className="id">{chat.message_id}</div>
98                                            <div className="text">{chat.content}</div>
99                                            <div className="name">{chat.user_name}</div>
100                                            <div className="date">{chat.posted_at}</div>
101                                        </div>
102                                    </div>
103                                )
104                            }
105                        })}
106                    </div>
107                </div>
108            </div>
109        </React.Fragment>
110    );
111
112}
113