نمایش نتیجه بعد جستجو

سلام خسته نباشید

قبلا این سوالو پرسیدم ولی نتونستم مشکلمو حل کنم و عذر میخوام بابت پرسیدن سوال تکراری❤️

من یه صفحه جستجو دارم و مشکلی که هست میخوام قبل از اینکه چیزی جستجو نشده
تو صفحه جستجو کتابی رو نمایش نده ...

این کد Api جستجویی که دارم

import { useState, useEffect } from "react";
import axios from "axios";

function SearchAPI() {
  const [books, setBooks] = useState([]);
  const [callback, setCallback] = useState(false);
  const [sort, setSort] = useState("");
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [result, setResult] = useState(0);

  useEffect(() => {
    const getBooks = async () => {
      const res = await axios.get(
        `/api/books?limit=${page * 100}&${sort}&booktitle[regex]=${search}`
      );
      setBooks(res.data.books);
      setResult(res.data.result);
    };
    getBooks();
  }, [callback, sort, search, page]);

  return {
    books: [books, setBooks],
    callback: [callback, setCallback],
    sort: [sort, setSort],
    search: [search, setSearch],
    page: [page, setPage],
    result: [result, setResult],
  };
}

export default SearchAPI;

کد صفحه جستوی من

import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";

function Search() {
  const state = useContext(GlobalState);
  const [books] = state.searchAPI.books;
  const [search, setSearch] = state.searchAPI.search;

  return (
    <div className="box-top10">
        <input
          type="text"
          className="form-control col-md-6 offset-md-3 badge-pill"
          placeholder="جــســتــجــو"
          value={search}
          onChange={(e) => setSearch(e.target.value.toLowerCase())}
        />

        <ul className="list-inline text-center">
            {books.map((book) => {
            return <SearchItem key={book._id} book={book} />;
            })}
        </ul>
    </div>
  );
}

export default Search;

کد آیتم های جستجو

import React from "react";
import { Link } from "react-router-dom";

function SearchItem({ book }) {
  return (
      <div className="box6">
          <div className="f7 co">{book.title}</div>
          <div className="card-body">
            <Link  to={`/book/${book._id}`}/>
          </div>
        </div>
  );
}

export default SearchItem;