我的搜索输入和分页没有在Reactjs中触发任何东西

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const SearchPage = () => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    fetchData();
  }, [searchKeyword, currentPage]);

  const fetchData = async () => {
    try {
      const response = await axios.get(`/api/search?q=${searchKeyword}&page=${currentPage}`);
      setSearchResults(response.data.results);
    } catch (error) {
      console.error(error);
    }
  };

  const handleSearchInputChange = (event) => {
    setSearchKeyword(event.target.value);
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <input type="text" value={searchKeyword} onChange={handleSearchInputChange} />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
      <Pagination currentPage={currentPage} onPageChange={handlePageChange} />
    </div>
  );
};

const Pagination = ({ currentPage, onPageChange }) => {
  const handlePageClick = (page) => {
    onPageChange(page);
  };

  return (
    <div>
      <button onClick={() => handlePageClick(currentPage - 1)}>Previous</button>
      <span>{currentPage}</span>
      <button onClick={() => handlePageClick(currentPage + 1)}>Next</button>
    </div>
  );
};

export default SearchPage;