Как удалить кнопку Load More если уже закончился объект

Вот мой сам код :

const Blog = () => {
  const {game , setGame} = useContext(Context)
  const [noOfElements, setnoOfElements] = useState(6)
  const loadMore = () => {
    setnoOfElements(noOfElements + noOfElements)
  }

  const [first, setfirst] = useState(data);
  const slice = first.slice(0, noOfElements)

  function filterElements(category) {
    const mebs = data.filter(function (div) {
      return div.category === category
    })
    setfirst(mebs)
  }

  function FfilterElements(category) {
    setfirst(data, category)
  };


  return (
    <div>
      <div className="color-bg-parent">
        <div className="container-blog">
          <div className="card-information-side">
            <h1 className="card-information-text">Blog</h1>
          </div>
        </div>
      </div>
      <div className="container-blog">
        <div className="second-parent-of-match-component">
          <div className="parent-of-buttons">
            <div className="btn-parent">
              <button id="buttons" onClick={() => FfilterElements('ALL')} className="btn-match-component">All</button>
              <span className="span-of-border">/</span>
            </div>
            <div className="btn-parent">
              <button id="buttons" onClick={() => filterElements('DOTA')} className="btn-match-component">DOTA 2</button>
              <span className="span-of-border">/</span>
            </div>

            <div className="btn-parent">
              <button id="buttons" onClick={() => filterElements('FORTNITE')} className="btn-match-component">FORTNITE</button>
              <span className="span-of-border">/</span>
            </div>

            <div className="btn-parent">
              <button id="buttons" onClick={() => filterElements('CSGO')} className="btn-match-component">CS:GO</button>
              <span className="span-of-border">/</span>
            </div>

            <div className="btn-parent">
              <button id="buttons"z onClick={() => filterElements('PUBG')} className="btn-match-component">PUBG</button>
            </div>
          </div>
        </div>
      </div>
      <div className="container-map">
        <div className="parent-div-content-blog">
          <motion.div className="grid-of-blog-section">
            <AnimatePresence>
              {slice.map((el) => {
                return (
                  <motion.div layout animate={{opacity: 1}} initial={{opacity: 0}} exit={{opacity: 0}}  className="parent-map-blog">
                    <Link to={`/blog/${el.id}`}><img className="img-blog" src={el.img} alt="" /></Link>
                    <h3 className='data-blog'>{el.data}</h3>
                    <h1 className="title-of-blog"><Link className="a-blog" to={`/blog/${el.id}`}>{el.title}</Link></h1>
                    <Link to={`/blog/${el.id}`}> <button className="btn-link-blog">
                      <button  className="btn-about-title slide_diagonal">Read More</button>
                    </button>
                    </Link>
                  </motion.div>
                )
              })}
            </AnimatePresence>

          </motion.div>
        </div>
        <div className="parent-load-more-btn">
          {slice.length == 0 ? '' : <button onClick={() => loadMore()} className="btn-load-more-blog">Load More</button>} `все работает только здесь наверное не правильно (моё мнение)`
          
        </div>
      </div>
      <div className="footer-blog">
      <Footer/>
      </div>
    </div>
  );
};

export default Blog;