API request with Svelte returning object in DOM

Question

I'm struggling to understand why my loop is displaying this:

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

I tried many things with fetch and axios but it ends the same way 😞

Here is my Svelte component:

<script>
  import axios from 'axios';

  let results = [];

 const fetchYoutubeList = async () => {
    const searchQuery = 'mySearch';
    const maxResults = 10;
    const apiKey = import.meta.env.VITE_APP_YOUTUBE_API_KEY;
    const apiBaseUrl = import.meta.env.VITE_APP_API_BASE_URL;

    await axios.get(`${apiBaseUrl}`, {
      params: {
        part: 'snippet',
        maxResults: maxResults,
        q: searchQuery,
        type: 'video',
        key: apiKey
      }
    })
      .then(response => {
        console.log(response.data);
        results = response.data.items;
        console.log(results);
        console.log(typeof results);
      });
  };
</script>

<section>
  <button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2"
    on:click|once={fetchYoutubeList}
  >
    Bring me joy
  </button>

  <div>
    <ul>
      {#each results as item }
        <li>
          {item.id}
        </li>
      {/each}
    </ul>
  </div>
</section>

Here the results of my logs:

I think I missed something but I can't find what, so if some of you have an idea I would be glad if you can debug me 😊

Thanks 🙏