Soy muy nuevo en reaccionar y estoy tratando de hacer una llamada API basada en la entrada del usuario usando axios. Puedo obtener los resultados con la consulta codificada ('automóviles') en el envío del formulario, pero me gustaría poder permitir que el usuario busque diferentes elementos. Estoy atascado en cómo conectar la entrada del usuario a la llamada API.

 import axios from "axios"; import { useState, useEffect } from "react"; function App() { const [data, setData] = useState([]); const [userInput, setUserInput] = useState([]); const handleSubmit = (event) => { event.preventDefault(); axios({ url: "https://api.unsplash.com/search/photos", method: "GET", dataResponse: "json", params: { client_id: "d54vE8fu6bjJ_JgkBqugaZOt4bwFHGkmiKDGHunnXxc", query: "cars", per_page: 10, }, }).then((response) => { console.log(response.data.results); setData(response.data.results); }); }; return ( <div> <form action="" onSubmit={handleSubmit}> <label htmlFor="search">Search</label> <input id="search" type="text" value={userInput} onChange={(event) => setUserInput(event.target.value)} /> </form> <div> {data.map((item) => { return ( <div key={item.id}> <img src={item.urls.thumb} alt="" /> </div> ); })} </div> </div> ); } export default App;