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

Below mentioned is the array of objects that contains multiple details, I want to filter the data on behalf of some keys like title, category, city, etc. [{ "searchString": "restaurant", "rank": 17, "searchPageUrl": "https://www.google.com/maps/search/restaurant/@12.931432169857194,77.64905676548571,16z?hl=en", "searchPageLoadedUrl": null, "isAdvertisement": false, "title": "Baraath Restaurant", "subTitle": null, "description": null, "price": "₹1–200", "categoryName": "Chinese restaurant", "address": "779, 80 Feet Rd, 4th Block, Koramangala, Bengaluru, Karnataka 560034, India", "neighborhood": "4th Block, Koramangala", "street": "779, 80 Feet Rd", "city": "Bengaluru", "postalCode": "560034", "state": "Karnataka", "countryCode": "IN", "website": null, "phone": null, "phoneUnformatted": null, "claimThisBusiness": false, "location": { "lat": 12.9309379, "lng": 77.632549 }, "locatedIn": null, "plusCode": "WJJM+92 Bengaluru, Karnataka, India", "menu": null, "totalScore": 5, "permanentlyClosed": false, "temporarilyClosed": false, "placeId": "ChIJpwB4WK0VrjsRkiHlceSPc6g", "categories": [ "Chinese restaurant" ], "fid": "0x3bae15ad587800a7:0xa8738fe471e52192", "cid": "12138203632019775890", "reviewsCount": 30, "reviewsDistribution": { "oneStar": 0, "twoStar": 0, "threeStar": 0, "fourStar": 0, "fiveStar": 30 }, "imagesCount": 5, "imageCategories": [ "All", "Menu", "Food & drink", "By owner", "Street View & 360°" ], "scrapedAt": "2024 11 21T14:18:26.004Z", "reserveTableUrl": "https://www.google.com/maps/reserve/v/dine/c/PjO8ZxWx2YI?source=pa&opi=79508299&hl=en US&gei=JUE_Z9f HKeQwbkP2K3JkAU&sourceurl=http://www.google.com/service/MapsPlaceService/GetPlace?hl%3Den%26authuser%3D0%26gl%3Dus%26q%3DBaraath%2BRestaurant", "googleFoodUrl": null, "hotelStars": null, "hotelDescription": null, "checkInDate": null, "checkOutDate": null, "similarHotelsNearby": null, "hotelReviewSummary": null, "hotelAds": [], "popularTimesLiveText": null, "popularTimesLivePercent": null, "popularTimesHistogram": { "Su": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 0 }, { "hour": 10, "occupancyPercent": 0 }, { "hour": 11, "occupancyPercent": 6 }, { "hour": 12, "occupancyPercent": 13 }, { "hour": 13, "occupancyPercent": 6 }, { "hour": 14, "occupancyPercent": 6 }, { "hour": 15, "occupancyPercent": 13 }, { "hour": 16, "occupancyPercent": 33 }, { "hour": 17, "occupancyPercent": 33 }, { "hour": 18, "occupancyPercent": 53 }, { "hour": 19, "occupancyPercent": 40 }, { "hour": 20, "occupancyPercent": 20 }, { "hour": 21, "occupancyPercent": 6 }, { "hour": 22, "occupancyPercent": 6 }, { "hour": 23, "occupancyPercent": 0 } ], "Mo": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 73 }, { "hour": 10, "occupancyPercent": 46 }, { "hour": 11, "occupancyPercent": 20 }, { "hour": 12, "occupancyPercent": 6 }, { "hour": 13, "occupancyPercent": 33 }, { "hour": 14, "occupancyPercent": 60 }, { "hour": 15, "occupancyPercent": 80 }, { "hour": 16, "occupancyPercent": 53 }, { "hour": 17, "occupancyPercent": 66 }, { "hour": 18, "occupancyPercent": 46 }, { "hour": 19, "occupancyPercent": 40 }, { "hour": 20, "occupancyPercent": 33 }, { "hour": 21, "occupancyPercent": 80 }, { "hour": 22, "occupancyPercent": 66 }, { "hour": 23, "occupancyPercent": 0 } ], "Tu": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 13 }, { "hour": 10, "occupancyPercent": 20 }, { "hour": 11, "occupancyPercent": 40 }, { "hour": 12, "occupancyPercent": 80 }, { "hour": 13, "occupancyPercent": 40 }, { "hour": 14, "occupancyPercent": 33 }, { "hour": 15, "occupancyPercent": 46 }, { "hour": 16, "occupancyPercent": 100 }, { "hour": 17, "occupancyPercent": 93 }, { "hour": 18, "occupancyPercent": 40 }, { "hour": 19, "occupancyPercent": 13 }, { "hour": 20, "occupancyPercent": 6 }, { "hour": 21, "occupancyPercent": 20 }, { "hour": 22, "occupancyPercent": 13 }, { "hour": 23, "occupancyPercent": 0 } ], "We": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 6 }, { "hour": 10, "occupancyPercent": 20 }, { "hour": 11, "occupancyPercent": 6 }, { "hour": 12, "occupancyPercent": 6 }, { "hour": 13, "occupancyPercent": 33 }, { "hour": 14, "occupancyPercent": 33 }, { "hour": 15, "occupancyPercent": 60 }, { "hour": 16, "occupancyPercent": 46 }, { "hour": 17, "occupancyPercent": 46 }, { "hour": 18, "occupancyPercent": 26 }, { "hour": 19, "occupancyPercent": 13 }, { "hour": 20, "occupancyPercent": 20 }, { "hour": 21, "occupancyPercent": 6 }, { "hour": 22, "occupancyPercent": 0 }, { "hour": 23, "occupancyPercent": 0 } ], "Th": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 0 }, { "hour": 10, "occupancyPercent": 0 }, { "hour": 11, "occupancyPercent": 0 }, { "hour": 12, "occupancyPercent": 0 }, { "hour": 13, "occupancyPercent": 0 }, { "hour": 14, "occupancyPercent": 0 }, { "hour": 15, "occupancyPercent": 0 }, { "hour": 16, "occupancyPercent": 0 }, { "hour": 17, "occupancyPercent": 0 }, { "hour": 18, "occupancyPercent": 0 }, { "hour": 19, "occupancyPercent": 0 }, { "hour": 20, "occupancyPercent": 6 }, { "hour": 21, "occupancyPercent": 13 }, { "hour": 22, "occupancyPercent": 13 }, { "hour": 23, "occupancyPercent": 0 } ], "Fr": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 0 }, { "hour": 10, "occupancyPercent": 6 }, { "hour": 11, "occupancyPercent": 13 }, { "hour": 12, "occupancyPercent": 13 }, { "hour": 13, "occupancyPercent": 13 }, { "hour": 14, "occupancyPercent": 13 }, { "hour": 15, "occupancyPercent": 20 }, { "hour": 16, "occupancyPercent": 20 }, { "hour": 17, "occupancyPercent": 26 }, { "hour": 18, "occupancyPercent": 20 }, { "hour": 19, "occupancyPercent": 6 }, { "hour": 20, "occupancyPercent": 6 }, { "hour": 21, "occupancyPercent": 13 }, { "hour": 22, "occupancyPercent": 33 }, { "hour": 23, "occupancyPercent": 0 } ], "Sa": [ { "hour": 6, "occupancyPercent": 0 }, { "hour": 7, "occupancyPercent": 0 }, { "hour": 8, "occupancyPercent": 0 }, { "hour": 9, "occupancyPercent": 40 }, { "hour": 10, "occupancyPercent": 40 }, { "hour": 11, "occupancyPercent": 20 }, { "hour": 12, "occupancyPercent": 33 }, { "hour": 13, "occupancyPercent": 26 }, { "hour": 14, "occupancyPercent": 13 }, { "hour": 15, "occupancyPercent": 13 }, { "hour": 16, "occupancyPercent": 6 }, { "hour": 17, "occupancyPercent": 0 }, { "hour": 18, "occupancyPercent": 0 }, { "hour": 19, "occupancyPercent": 6 }, { "hour": 20, "occupancyPercent": 20 }, { "hour": 21, "occupancyPercent": 26 }, { "hour": 22, "occupancyPercent": 46 }, { "hour": 23, "occupancyPercent": 0 } ] }, "openingHours": [ { "day": "Monday", "hours": "9:30 AM to 11 PM" }, { "day": "Tuesday", "hours": "9:30 AM to 11 PM" }, { "day": "Wednesday", "hours": "9:30 AM to 11 PM" }, { "day": "Thursday", "hours": "9:30 AM to 11 PM" }, { "day": "Friday", "hours": "9:30 AM to 11 PM" }, { "day": "Saturday", "hours": "9:30 AM to 11 PM" }, { "day": "Sunday", "hours": "9:30 AM to 11 PM" } ], "peopleAlsoSearch": [ { "category": "People also search for", "title": "The Naati Bar & Kitchen", "reviewsCount": 168, "totalScore": 3.9 }, { "category": "People also search for", "title": "Shri Prayag Raj Restaurant", "reviewsCount": 1, "totalScore": 1 } ], "placesTags": [], "reviewsTags": [ { "title": "price", "count": 3 }, { "title": "biryani", "count": 2 }, { "title": "hygiene", "count": 2 } ], "additionalInfo": { "Service options": [ { "Curbside pickup": true }, { "Delivery": true }, { "Drive through": true }, { "Takeout": true }, { "Dine in": true } ], "Highlights": [ { "Fireplace": true } ], "Accessibility": [ { "Assistive hearing loop": false }, { "Wheelchair accessible entrance": false }, { "Wheelchair accessible parking lot": false }, { "Wheelchair accessible restroom": false }, { "Wheelchair accessible seating": false } ], "Offerings": [ { "Small plates": true }, { "Vegetarian options": true }, null ], "Dining options": [ { "Lunch": true }, { "Dinner": true }, { "Counter service": true }, { "Seating": true } ], "Amenities": [ { "Restroom": true } ], "Atmosphere": [ { "Casual": true } ], "Crowd": [ { "Family friendly": true }, { "Groups": true } ], "Planning": [ { "Accepts reservations": true } ], "Payments": [ { "Cash only": true }, { "Google Pay": true } ], "Children": [ { "Good for kids": true } ], "Parking": [ { "Free street parking": true } ] }, "gasPrices": [], "questionsAndAnswers": [], "updatesFromCustomers": null, "ownerUpdates": [], "url": "https://www.google.com/maps/search/?api=1&query=Baraath%20Restaurant&query_place_id=ChIJpwB4WK0VrjsRkiHlceSPc6g", "imageUrl": "https://lh5.googleusercontent.com/p/AF1QipOSApGI7OTkbK9Z9if6H9mMY8gctps bGsC3lqP=w408 h908 k no", "kgmid": "/g/11y5gtt75z", "webResults": [], "parentPlaceUrl": null, "tableReservationLinks": [ { "name": "zomato.com", "url": "https://www.zomato.com/bangalore/baraath restaurant veg non veg koramangala 3rd block bangalore/book?utm_source=rwg" } ], "bookingLinks": [], "orderBy": [], "images": null, "imageUrls": [ "https://lh5.googleusercontent.com/p/AF1QipOSApGI7OTkbK9Z9if6H9mMY8gctps bGsC3lqP=w1920 h1080 k no" ], "reviews": [], "userPlaceNote": null }]