Railsで非同期通信でのコメント機能について

前提・実現したいこと

非同期通信でコメント機能を実装したのですがページをリロードするとコメントした人のユーザー名が表示されるのですがコメントを投稿した直後だとユーザー名が表示されていません。
どうにかコメント投稿した段階で表示されるようにしたいです。

該当のソースコード

show.html.erb```ここに言語を入力
コード

```html
<div class="comments">
  <div class="comment">
    <% if user_signed_in? %>
      <%= form_with(model: [@post, @comment], local: true, class:"comment-form",id:"form") do |form| %>
        <%= form.text_area :text, placeholder: "コメントを追加...",class:"comment-area", row: "1", id:"text" %>
        <%= form.submit "コメント",class:"comment-submit",id:"submit" %>
      <% end %>
    <% end %>
  </div>
</div>



<div id="list">
</div>

<% @comments.each do |comment| %>
  <div class="comment">
    <div class="comment-date">
      投稿日時：<%= l comment.created_at %>
    </div>
    <div class="comment-text">
      <%= comment.user.nickname %>
      <%= comment.text%>
    </div>
  </div>
<% end %>

comments_controller

ruby
1class CommentsController < ApplicationController
2
3  def create
4    comment = Comment.create(comment_params)
5    user = User.find(params[:id])
6    render json:{comment: comment,user: user}
7  end
8
9  private
10  def comment_params
11    params.require(:comment).permit(:text).merge(user_id: current_user.id,post_id: params[:post_id])
12  end
13end

posts_controller

ruby
1class CommentsController < ApplicationController
2
3  def create
4    comment = Comment.create(comment_params)
5    user = User.find(params[:id])
6    render json:{comment: comment,user: user}
7  end
8
9  private
10  def comment_params
11    params.require(:comment).permit(:text).merge(user_id: current_user.id,post_id: params[:post_id])
12  end
13end
14

comment.js

javascript
1function post (){
2  const submit = document.getElementById("submit");
3  submit.addEventListener("click", (e) => {
4    e.preventDefault();
5    const form = document.getElementById("form");
6    const formData = new FormData(form);
7    const postCommentsPath = form.getAttribute("action")
8    const XHR = new XMLHttpRequest();
9    XHR.open("POST",postCommentsPath,true);
10    XHR.responseType = "json";
11    XHR.send(formData);
12    XHR.onload = () => {
13      const list = document.getElementById("list")
14      const formText = document.getElementById("text");
15      const item = XHR.response.comment;
16      const user = XHR.response.user;
17      if (item.text == "") {
18        alert("コメントを入力してください!");
19      }
20      else {
21      const html = `
22      <div class="comment">
23        <div class="comment-date">
24          投稿日時： ${ item.created_at}
25        </div>
26        <div class="comment-text">
27          ${user.nickname}
28          ${item.text}
29        </div>
30      </div>`;
31      list.insertAdjacentHTML("afterend",html);
32      formText.value = "";
33      };
34    };
35  });
36};
37
38window.addEventListener('load', post);
39

試したこと

javascriptファイルのconst html　= ``内にuser.nicknameを表示させる記述を書けばいけるような気がするのですが上手くいきません。
comment_controllerのcreateアクションでuserの情報を取得してrenderでjsファイルに送り表示できるようになるかなと思ったんですけどダメでした。