SearchBar Assistance-React - reactjs

Question

So I am trying to set a searchbar that has a drop down menu that gives you options on what you want to search for=and then let the user input. I have a list of inspections that I want to base that on.
For example I want to search inspections that only have issues with pests, so the user selects the pest option for search and then inputs-hive beetles
so the dropdown should have an option of searching by: pests, notes, actions taken, and so forth, my table has 8 values that I want to specific each search.
I have am using React for this and my database is in django, any suggestions on how to tackle this? The research I found is not really helpful.
My InpsectionSearch
import {React, useState} from "react";
const SearchInspections = (inspections) => {
const [searchField, setSearchField] = useState("")
const [searchResults, setSearchResults] = useState([])
function handleChange(event){
event.preventDefault()
const filteredInspections = inspections.filter((inspections) => {
return (
inspections.eggs().includes(searchField.toLowerCase()) ||
inspections.larvae().includes(searchField.toLowerCase()) ||
inspections.sealed_brood().includes(searchField.toLowerCase()) ||
inspections.covered_bees().includes(searchField.toLowerCase()) ||
inspections.nectar_honey().includes(searchField.toLowerCase()) ||
inspections.pollen().includes(searchField.toLowerCase()) ||
inspections.pest_spotted.toLowerCase().includes(searchField.toLowerCase()) ||
inspections.pest_action.toLowerCase().includes(searchField.toLowerCase()) ||
inspections.notes_concerns.toLowerCase().includes(searchField.toLowerCase())
)
})
setSearchResults(filteredInspections)
if(searchField.length > 0){
inspections(searchResults)
}
}
return (
<form onSubmit={handleChange}>
<h3>Search For Your Item</h3>
<input type="search" placeholder='Search Song' value={searchField} onChange={event => setSearchField(event.target.value)}/>
<button type='submit'>Click twice to search</button>
</form>
);
}
export default SearchInspections;
my Inspection Page where the searchbar will be
import { React, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import useAuth from "../../hooks/useAuth";
import DisplayInspections from "../../components/DisplayInspections/DisplayInspections";
import InspectionTracker from "../../components/InspectionTracker/InspectionTracker";
import SearchInspections from "../../components/InspectionSearch/InspectionSearch"
const InspectionPage = (props) => {
const [user, token] = useAuth();
const [inspections, setInspections] = useState([]);
const { id } = useParams();
useEffect(() => {
fetchInspections();
}, [token]);
const fetchInspections = async () => {
try {
let response = await axios.get(
`http://127.0.0.1:8000/api/inspections/all/${id}`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
setInspections(response.data);
} catch (error) {
console.log(error.response.data);
}
};
function applyFilter(category, userInput){
if(category === 'All' || userInput ===''){
console.log('working!')
fetchInspections();
}
else
{
let newInspections = inspections.filter(function(element){
if(element[category] === userInput){
return true;
}
})
setInspections(newInspections);
}
}
return (
<div className="container">
<InspectionTracker inspections={inspections} />
<SearchInspections inspections={inspections} />
<DisplayInspections
inspections={inspections}
setSelectedHive={props.setSelectedHive}
setSelectedInspection={props.setSelectedInspection}
/>
</div>
);
};
export default InspectionPage;