Default Component - Copy this React, Tailwind Component to your project

<div className="flex flex-row gap-4"> <div className="flex-[0.75]"> {/* Sort dropdown */} <div className="flex justify-between items-center mb-6"> <select className="block w-52 p-3 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-all duration-200 cursor-pointer shadow-sm" value={sortType} onChange={(e) => sortSelect(e.target.value)} > <option value="All">All</option> <option value="Le">Single</option> <option value="Combo">Combo</option> </select> </div> i want to search by single or combo, useEffect(() => { window.scrollTo(0, 0); if (vaccines.length > 0 || combos.length > 0) { setSortVaccines([...vaccines, ...combos]); } }, [vaccines, combos]); useEffect(() => { const handleSubmit = (e) => { ref.current.focus(); const searchValue = ToUpperCaseWords(inputData.trim().toLowerCase()); if (searchValue) { const sortByNameVaccine = vaccines .filter((vaccine) => vaccine.name.includes(searchValue)) .sort((a, b) => a.price - b.price); const sortByNameCombo = combos .filter((combo) => combo.name.includes(searchValue)) .sort((a, b) => a.price - b.price); const combinedResults = [...sortByNameVaccine, ...sortByNameCombo]; if (combinedResults.length > 0) { setSortVaccines(combinedResults); setIsOpen(true); } else { setIsOpen(false); } } else { setSortVaccines([...vaccines, ...combos]); setIsOpen(true); } }; handleSubmit(); }, [inputData]); const handleInput = (e) => { setInputData(e.target.value); }; const sortSelect = (type) => { setSortType(type); let sorted = []; switch (type) { case "All": sorted = [...vaccines, ...combos]; break; case "Le": sorted = [...vaccines]; break; case "Combo": sorted = [...combos]; break; default: sorted = [...vaccines, ...combos]; } if ((vaccines.length > 0 || combos.length > 0)) { setIsOpen(true) setSortVaccines(sorted); } }; const handleSubmit = (e) => { e.preventDefault(); ref.current.focus(); const searchValue = ToUpperCaseWords(inputData.trim().toLowerCase()); console.log(searchValue); setInputData(''); if (searchValue) { const sortByNameVaccine = vaccines .filter((vaccine) => vaccine.name.includes(searchValue)) .sort((a, b) => a.price - b.price); const sortByNameCombo = combos .filter((combo) => combo.name.includes(searchValue)) .sort((a, b) => a.price - b.price); const combinedResults = [...sortByNameVaccine, ...sortByNameCombo]; if (combinedResults.length > 0) { setSortVaccines(combinedResults); setIsOpen(true); } else { setIsOpen(false); } } else { setSortVaccines([...vaccines, ...combos]); setIsOpen(true); } }; use this code