歩数を記録するにあたって、合計値を非同期通信で出力させたい。

以下のようなuserのマイページで歩数の合計を非同期通信にて、表示させたいです。

↓/views/users/show

  <%# 歩数カウント 表示を変えたい部分 %>
  <div id="step-sum">
  <%= @steps.values.sum %>
  </div>
  <%# /歩数カウント %>

    <% if @user == current_user %>
      <div class="active-form">
        <%= form_with url:actives_path, id:"step-form", local: true do |f| %>
        <div class="form-step">
          <%= f.text_field :step, class:"step-input", id:"active-step" %>
        </div>
        <div class="form-submit">
          <%= f.submit "歩数を記録", class:"form-btn", id: "step-submit"%>
        </div>
        <% end %>
      </div>
       割愛

↓js

function step () {
  const submit = document.getElementById("step-submit")
  submit.addEventListener("click", (e) => {
    e.preventDefault();
    const step_form = document.getElementById("step-form");
    const formStepData = new FormData(step_form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/actives", true);
    XHR.responseType = "json";
    XHR.send(formStepData);
    XHR.onload = () => {
      const step_count =document.getElementById("step-sum");
      const formStep =document.getElementById("active-step");
      const item = XHR.response.step;
       step_count.innerHTML=`
        <div class="step-sum">
          ${item.step}
        </div>`;
    };
  }); 
};

window.addEventListener('load', step)

↓UsersController

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @posts = @user.posts
    @steps = Active.where(user_id: current_user.id).group(:user_id).sum(:step)
  end
end

↓歩数を記録するActivesController

class ActivesController < ApplicationController

  def create
    step = Active.create(active_params)
    render json:{ step: step }
  end

  private
  def active_params
    params.permit(:step).merge(user_id: current_user.id)
  end
end

状況、確認

onloadまでで、値の保存ができているところまで確認済みです。
今の挙動だと、歩数を記録したあと、

{"step":{"id":27,"step":500,"user_id":2,"created_at":"2022-07-01T08:15:40.072Z","updated_at":"2022-07-01T08:15:40.072Z"}}

だけが表示される画面に遷移してしまいます。これは、Userコントローラー内のshowアクションからActivesコントローラー内でrenderしているからrenderの指定先が間違えているということでしょうか。
また、合計数の表記も非同期通信する前なら<%= @steps.values.sum %>で表示できていましたが、
innerHTMLだとどういった表記が適切なのでしょうか？
よろしくお願いします。

回答受付後

insertAdjacentHTMLに変更。
思った位置に表記させることはできたが、数値の取り出し方、合計表記がわからず。
↓
insertAdjacentHTMLでは、上に配置されるだけなのでinnerHTMLにして置き換わるように${item.step}で入力された値は置き変わりして表示されるように！！合計の出力の方が、わからず、、、