Add the tag h2 with the text Page Number when it's updated on Infinite Scroll

I am doing the course Phoenix Live View Studio and I am trying to add a tag <h2> when it’s updated the Hooks.InfiniteScroll.
I add this html code on the render function:

 def render(assigns) do
    ~L"""
    <div id="infinite-scroll">
      <h1>Pizza Lovers Timeline</h1>
      <div id="orders" phx-update="append">
        <%= for order <- @orders do %>
          <div class="order" id="<%= order.id %>">
            <div class="id">
              <%= order.id %>
            </div>
            <div>
              <div class="pizza">
                <%= order.pizza %>
              </div>
              <div>
                ordered_by
                <span class="username">
                  <%= order.username %>
                </span>
              </div>
            </div>
          </div>
          
          <%= if @page > 1 do %>
            <div id="page-number">
            </div>
          <% end %>
          
        <% end %>
      </div>

      <div id="footer"
           phx-hook="InfiniteScroll"
           data-page-number="<%= @page %>">
       <div class="loader">
          Load More...
       </div>
    </div>
    """
  end

and in the Hooks.infiniteScroll:

...

  updated() {
    const pageNumber = this.el.dataset.pageNumber
    console.log("updated", pageNumber)

    let h2 = document.createElement('h2')
    let text = document.createTextNode(`Page Number ${pageNumber}`)  
    h2.appendChild(text)

    let divpageNumber = document.querySelector("#orders #page-number")
    divpageNumber.appendChild(h2)

  },
...

I don’t know how to fix, can anyone help me with this?
I just want to show the Number of pages when each time updates the hooks.