メッセージを送信時に最新のメッセージの場所にスクロールさせたい。Ajax

php,ajaxを用いてチャットアプリを作成しています。

ラインのようなものを自作しているのですが、メッセージを送信すると下に自動的にスクロールされずにどのようにしたらいいか困っています。
チャット画面とチャット送信時に画面リロードのAjaxが動作するコードを以下に表示します。

php
1        <form action="#" class="typing-area" autocomplete="off" method="POST">
2            <input type="text" name="outgoing_msg_id" value="省略" hidden>
3            <input type="text" name="incoming_msg_id" value="省略" hidden>
4            <input type="text" class="input-field" name="msg" placeholder="メッセージを入力">
5            <button type="button"><i class="fas fa-paper-plane"></i></button>
6        </form>

画面更新↓

js
1const form = document.querySelector(".typing-area"),
2inputField = form.querySelector(".input-field"),
3sendBtn = form.querySelector("button"),
4chatBox = document.querySelector(".chat-box");
5
6
7function scrollToBottom(){
8  chatBox.scrollTop = chatBox.scrollHeight;
9}
10
11sendBtn.onclick = ()=>{
12    let xhr = new XMLHttpRequest();
13    xhr.open("POST", "insert-chat.php", true);
14    xhr.onload = ()=>{
15      if(xhr.readyState === XMLHttpRequest.DONE){
16          if(xhr.status === 200){
17              inputField.value = "";
18              scrollToBottom();
19          }
20      }
21    }
22    let formData = new FormData(form);
23    xhr.send(formData);
24    
25}
26
27
28setInterval(() =>{
29    let xhr = new XMLHttpRequest();
30    xhr.open("POST", "get-chat.php", true);
31    xhr.onload = ()=>{
32      if(xhr.readyState === XMLHttpRequest.DONE){
33          if(xhr.status === 200){
34            let data = xhr.response;
35            chatBox.innerHTML = data;
36        }
37    }
38  }
39  let formData = new FormData(form);
40    xhr.send(formData);
41  
42}, 500);