How to Create a type and search Component in Next.js React?

import { useState } from 'react';
 
function TypeAndSearch({ data }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
 
  async function handleSearch(e) {
    e.preventDefault();
    const response = await fetch(`/api/search?q=${searchTerm}`);
    const data = await response.json();
    setResults(data);
  }
 
  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button type="submit">Search</button>
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </form>
  );
}
 
export default TypeAndSearch;