React Js поиск объектов через API

Я делаю проект рецептов коктейлей для практики(я новичок в этом плане). Я из прошлого похожего API перенес половину кода и почти все получилось, но я наткнулся на проблему поисковика. Он видит только одну группу напитков. Не могу понять, как сделать так, чтобы он видел все напитки. Помогите, пожалуйста.

import {useState} from 'react';


function Search ({cb = Function.prototype}) {
    const [value,setValue] = useState([]);

    const handleKey = (e) => {
        if (e.key === 'Enter') {
            handleSubmit();
        }
    };

    const handleSubmit = () => {
        cb(value);
    }; 



    return (
        <>
        
    <div className="row">
            <div className="input-field col s12">
            <input 
                type ='search'
                id='search-field'
                placeholder='search'
                onKeyDown={handleKey}
                onChange={(e) => setValue(e.target.value)}
                value={value}
            />
        
            <button
             className='btn'
             style={{ 
                 position: 'absolute',
                 top:0,
                 right:0,
             }} 
             onClick={handleSubmit}
             >
               Search
            </button>
            
            </div>
        </div>
        </>
    );
}

export { Search };

function Home() {
    const [catalog, setCatalog] = useState([]);
    const [filteredCatalog, setFilteredCatalog] = useState ([]);



    const handleSearch = (strDrink) => {
        setFilteredCatalog (
            catalog.filter((item) => 
            item.strDrink.toLowerCase().includes(strDrink.toLowerCase())
            )
        );
    };
    
    


    useEffect(() => {
        getDifferentDrinks().then((data) => {
            setCatalog(data.drinks);
            setFilteredCatalog(data.drinks);
        });
    }, []);

  



    return (
        <>
        <Search cb={handleSearch}/>
        {!catalog.length ? (
            
            <Preloader /> 
            ) : ( 
                <WaterList catalog={filteredCatalog}  /> 
                )}
       
                
        </>
    );
}

import { API_URL } from './config';

const getDrinkById = async (drinkId) => {
    const response = await fetch(API_URL + 'lookup.php?i=' + drinkId);
    return await response.json();
};

const getDifferentDrinks = async () => {
    const response = await fetch(API_URL + 'search.php?s=');
    return await response.json();
};

Остальные группы напитков которые мне нужны

www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic
www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic
www.thecocktaildb.com/api/json/v1/1/filter.php?c=Ordinary_Drink
www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail