Buscador de productos

En mi caso dentro de nuestro archivo de context.jsx cree el estado de nuesta searchBar y la funcion.

 // GET Producrs by SerachTitleBar
  const [searchTitleBar, setSearchTitleBar] = useState("")

  const Search = (event) => {
    setSearchTitleBar(event.target.value)
  }

Luego exportamos searchTitleBar y la funcion Search, y quedaria asi

function Home() {
  const context = useContext(ShoppingCartContext);
  console.log(context.searchTitleBar)

  return (
    <>
      <div className="m-4">
        <input 
          className="border border-black rounded-lg w-80 p-4 mb-4 focus:outline-none" 
          type="text" 
          placeholder="Search"
          onChange={context.Search}
        />
      </div>
      <div className="grid gap-4 grid-cols-3 w-full max-w-screen-md">
        {context.product?.map((product) => (
          <Card key={product.id} data={product} />
        ))}
      </div>
      <ProductDetail />
    </>
  );
}

Hola era para saber si alguien sabe como quitar esa X en un input que la verdad me tiene bastante fastidiado, siempre aparecexdd o al menos como puedo buscar para quitarla, como se llama o que 😦

Bueno, yo hace tiempo hice una página con Next.js y Tailwind donde implementé una barra de búsqueda
Hajime No Ippo
Y les comparto el código donde está la lógica para la barra de búsqueda repo de github

Lo hice así:

{loading && products.map(product=>{
        if(product.title.toLowerCase().includes(searchValue.toLowerCase())){
          
          return<Card 
          key={product.id}
          name={product.title}
          category={product.category.name}
          img={product.images[0]}
          price={product.price}
          description={product.description}
          id={product.id}
          />
        }
      })}