I want to search for a product's title with a search bar. I am using a local API with Next.js. I want to search the products by title.

Url API Next

http://localhost:3000/api/products

JSON Data

{
    id: "1",
    title: "Polo manga corta",
    image: "https://res.cloudinary.com/dj1ethf6d/image/upload/v1654948335/Mayoral/polo-manga-corta-contrastes-chico_id_22-06107-044-M-4_yfe04a.jpg",
    price: 12.9
}

Handler query

import { products } from './dataproducts'


export default async function handlerTitle (req, res){
    const products = req.query 
    const getTitle = await fetch(
        `http://localhost:3000/api/products/${products}`
        );
        const data = await getTitle.json(products);
        res.status(200).json(data);
}

Search component

import { useState } from 'react'
import styles from '../../styles/SearchBar.module.css'

function SearchBar({ data }) {

    const [query, setQuery] = useState('')

    const onChange = async (e) => {
        const {value} = e.target;
        setQuery(value)

        if (value.length > 3) {
            const response = await fetch(`http://localhost:3000/api/products?=${value}`);
            const data = await response.json();
            console.log(response)
        }
    }

input passing it the onChange and value

    return (
        <input 
        className={styles.input} 
        onChange={onChange}
        id='city'
        type="search" 
        name="search"
        value={query} 
        placeholder="Nombre producto..." />
    )
}

export default SearchBar