Refresh content from JSON fetch without complete page reload Rails 7

Question

I'm trying to update my views with data I get returned in JSON. Atm I'm only able to show [object Object] inside the divs. When I console.log it I get the full JSON data I want. But I only want to replace and show.created_at and.tweet_text. How do I do this?

my view

<div class="max-w-3xl mx-auto">
  <div class="px-4 mb-7 text-center">
    <p class="text-white mt-3 max-w-2xl mx-auto text-xl sm:mt-4">
      Some text here.
    </p>
  </div>
  <% @tweets_shown.reverse_each do |t| %>
    <ul role="list" class="mx-5 my-2 space-y-3">
      <li id="replacethis" class="text-white border shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md">
        <div class="text-xs mb-1"><%= t.created_at.in_time_zone("Eastern Time (US & Canada)").to_fs(:long) %> ET</div>
        <div><%= t.tweet_text %></div>
      </li>
    </ul>
  <% end %>
</div>

<script>
  setInterval(function () {
    fetch('/pages/markets.json')
      .then((response) => response.json())
      // .then((data) => console.log(data))
      .then((data) => { 
        $('#replacethis').html('')
        data.forEach((item) => { 
        $('#replacethis').append($('<p/>',{ text: item} ))
      })
    });
  }, 10000); 
</script>

my controller

class PagesController < ApplicationController
  def markets
    @tweets_shown = Tweet.markets.all
    respond_to do |format|
      format.html
      format.json { render json: @tweets_shown }
    end
  end