问如何在加载时禁用按钮，但不会影响分页功能(React.js)

EN

import React,{ useState, useEffect } from "react";
import "./styles.css";

export default function App() {

  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(0);
  const [postsPerPage, setPostsPerPage] = useState(10);

  useEffect(()=>{
    getData();
  },[])

  async function getData(){
    setLoading(true);    
    const response = await fetch('https://stream-restaurant-menu-svc.herokuapp.com/item?category')
    let actualData = await response.json();
    setPosts(actualData)
    setLoading(false);   
  }

  const indexOfLastPost = (currentPage + 1) * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
 
    const pageNumbers = [];

    for (let i = 0; i < Math.ceil(posts.length / postsPerPage); i++) {
      pageNumbers.push(i);
    }
  
    const incrementPageNumber = () => {
      if (currentPage < pageNumbers.length - 1) {
        setCurrentPage((previousPageNumber) => previousPageNumber + 1);
      }
    };
  
    const decrementPageNumber = () => {
      if (currentPage > 0) {
        setCurrentPage((previousPageNumber) => previousPageNumber - 1);
      }
    };
    // if loading...
  if(loading){
    return <h2>Loading</h2>
  }

  return (
    <div className="App">
      <table className="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          {currentPosts.map((post) => (
            <tr>
              <td key={`${post.id}-id`}>{post.id}</td>
              <td key={`${post.name}-firstName`}>{post.name}</td>
              <td key={`${post.short_name}-lastName`}>{post.short_name}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div>
      <button 
      id='first'
      type='button'
      className='first-page-btn'
      disabled={loading || currentPage === 0}
      onClick={() => {setCurrentPage(0)}}
      >
        first
      </button>

      <button 
      id='previous'
      type='button'
      className='previous-page-btn'
      disabled={loading || currentPage === 0}
      onClick={decrementPageNumber}
      >
        previous
        </button>

      <button 
      id='next'
      type='button'
      className='next-page-btn'
      disabled={loading || currentPage === pageNumbers[pageNumbers.length - 1]}
      onClick={incrementPageNumber}
      >
      next
      </button>

      <button 
      id='last'
      type='button'
      className='last-page-btn'
      disabled={loading || currentPage === 0}
      onClick={() => setCurrentPage(pageNumbers[pageNumbers.length - 1])}
      >
      last
      </button>
      </div>
    </div>
  );
}