Sobre a renderização da pesquisa

Olá, Ryan! Tudo bem?

O que você está buscando é que a pesquisa seja realizada enquanto o usuário está digitando, ao invés de esperar que ele clique fora do input, certo?

Para isso, você pode usar o evento onChange no elemento do input. Esse evento é acionado sempre que o valor do input muda. Assim, você pode chamar uma função que realiza a pesquisa sempre que o usuário digita algo.

Veja um exemplo:

function Pesquisa() {
    const [livrosPesquisados, setLivrosPesquisados] = useState([])
    const [livros, setLivros] = useState([])

    useEffect(() => {
        fetchLivros()
    }, [])

    async function fetchLivros() {
        const livrosDaAPI = await getLivros()
        setLivros(livrosDaAPI)
    }

    const handleSearch = async (event) => {
        const searchTerm = event.target.value;
        const filteredBooks = await getLivros(searchTerm);
        setLivrosPesquisados(filteredBooks);
    }

    return (
        <div>
            <input type="text" onChange={handleSearch} />
            {/* Restante do código */}
        </div>
    )
}

Nesse exemplo, a função handleSearch é chamada sempre que o usuário digita algo no campo de pesquisa. A função pega o valor atual do campo (que é o termo de pesquisa) e realiza a pesquisa com base nesse valor. Em seguida, ela atualiza o estado livrosPesquisados com os livros filtrados.

Lembre-se de ajustar a função getLivros para aceitar um parâmetro de termo de pesquisa e filtrar os livros com base nesse termo.

Espero ter ajudado e bons estudos!