I'm very new to react and I am trying to make an api call based on user-input using axios. I'm able to get the results with the hard-coded query('cars') on form submit, but I'd like to be able to allow the user to search different items. I'm stuck on how to connect the user input to the api call.

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;