Como carregar dados utilizando o evento onClick

import { useState } from "react"

const fakeItems = [
  { id: 0, title: "Example0" },
  { id: 1, title: "Example1" },
  { id: 2, title: "Example2" },
  { id: 3, title: "Example3" },
  { id: 4, title: "Example4" },
  { id: 5, title: "Example5" },
]

export default function App() {
  const [list, setList] = useState(fakeItems) // meu array de objetos
  const [visibleItems, setVisibleItems] = useState(3) // este será o número de itens que serão exibidos na tela

  const handleLoadMore = () => {
    if (visibleItems < list.length) {
      // se houver mais items para exibir
      setVisibleItems(oldState => oldState + 3) // eu adiciono 3 itens
    }
  }

  const handleLoadLess = () => {
    if (list.slice(0, visibleItems).length > 3) {
      // se o tamanho da lista for maior que 3
      setVisibleItems(oldState => oldState - 3) // eu removo 3 itens
    }
  }

  return (
    <div>
      <div>
        {/* aqui eu faço um map apenas dos itens que estão visíveis */}
        {list.slice(0, visibleItems).map(item => (
          <span key={item.id}>{item.title}</span>
        ))}
      </div>

      <div>
        <button onClick={handleLoadMore}>Load more</button>
        <button onClick={handleLoadLess}>Load less</button>
      </div>
    </div>
  )
}