Working on a small application that takes a pexels api and displays photos dynamically. When I send the search request for my api to fectch based on the new params, it does actually update the page with new photos but not the ones based on the params. I though I got the search function correct, maybe it's cause I'm not using it in a useEffect? But if I did use it in a useEffect, I wouldn't be able to set it on the onClick handle. I tried to console.log the query I was getting from the onChange but it doesn't seem like it's getting the result. What am I doing wrong?

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
    }
});