FilterBrandsWithFilterUtility.jsx

const filterBrands = (brands, term) => {
  return brands.filter((brand) =>
    brand.name.toLowerCase().includes(term.toLowerCase()),
  );
};

const BrandsSidebar = () => {
  const [brands] = useBrands();
  const [filter, setFilter] = useState('');

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={({ target }) => setFilter(target.value)}
      />
      {filterBrands(brands, filter).map((brand) => (
        <BrandItem brand={brand} />
      ))}
    </div>
  );
};