FilterBrandsWithHooks.jsx

const useBrands = () => {
  const [brands, setBrands] = useState([]);
  useEffect(() => {
    const getBrands = async () => {
      const { data } = await axios.get('/brands');
      setBrands(data);
    };

    getBrands();
  }, []);
  return [brands];
}


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

  return (
    <div>
      <input type="text" value={filter} onChange={({ target }) => setFilter(target.value)} />
      {
        brands
          .filter(({ name }) => name.toLowerCase().includes(filter.toLowerCase()))
          .map(({ id, name }) => (
            <li key={id}>
              <input type="checkbox" name='brands' id={id} value={name} />
              <span>{name}</span>
            </li>
          ))
      }
    </div>
  )
}