Trabajando en una pequeña aplicación que toma una API de Pexels y muestra fotos de forma dinámica. Cuando envío la solicitud de búsqueda para que mi api realice la búsqueda en función de los nuevos parámetros, en realidad actualiza la página con nuevas fotos, pero no con las que se basan en los parámetros. Pensé que tenía la función de búsqueda correcta, ¿tal vez es porque no la estoy usando en un useEffect? Pero si lo usara en un useEffect, no podría configurarlo en el controlador onClick. Traté de console.log la consulta que estaba recibiendo de onChange pero no parece que esté obteniendo el resultado. ¿Qué estoy haciendo mal?

 import { useState, useEffect } from 'react' import pexelsApi from './components/pexelsApi' import './App.css' const App = () => { const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [nextPage, setNextPage] = useState(1); const [perPage, setPerPage] = useState(25); const [query, setQuery] = useState(''); const [error, setError] = useState(''); useEffect(() => { const getImages = async () => { setLoading(true); await pexelsApi.get(`/v1/curated?page=${nextPage}&per_page=${perPage}`) .then(res => { setImages([...images, ...res.data.photos]); setLoading(false); }).catch(er => { if (er.response) { const error = er.response.status === 404 ? 'Page not found' : 'Something wrong has happened'; setError(error); setLoading(false); console.log(error); } }); } getImages(); }, [nextPage, perPage]); const handleLoadMoreClick = () => setNextPage(nextPage + 1) const search = async (query) => { setLoading(true); await pexelsApi.get(`/v1/search?query=${query}&per_page=${perPage}`) .then(res => { setImages([...res.data.photos]); console.log(res.data) setLoading(false); console.log(query) }) } if (!images) { return <div>Loading</div> } return ( <> <div> <input type='text' onChange={(event) => setQuery(event.target.value)} /> <button onClick={search}>Search</button> </div> <div className='image-grid'> {images.map((image) => <img key={image.id} src={image.src.original} alt={image.alt} />)} </div> <div className='load'> {nextPage && <button onClick={handleLoadMoreClick}>Load More Photos</button>} </div> </> ) }; export default App

 import axios from 'axios'; export default axios.create({ baseURL: `https://api.pexels.com`, headers: { Authorization: process.env.REACT_APP_API_KEY } });