Как добавить поисковый фильтр в reactjs из базы данных Firebase

Question

Я новичок в reactjs и пожарной базе. Я смотрел некоторые учебники и пытаюсь научиться добавлять поисковый фильтр в свою базу данных. Я понимаю, как добавить поисковый фильтр при получении массива, но я не понимаю, как применить эти знания при работе с firebase. Какие шаги я должен предпринять, чтобы сделать это? Любая помощь очень ценится.

Вот мой код:

const SORT_OPTIONS = {
    'RATING_ASC': {column: 'name_rating', direction: 'asc'},
    'RATING_DESC': {column: 'name_rating', direction: 'desc'},
    'NAME_ASC': {column: 'name', direction: 'asc'},
    'NAME_DESC': {column: 'name', direction: 'desc'},
}

function useNames(sortBy = 'NAME_ASC'){
    const [names, setNames] = useState([]) 

    useEffect(() => {
        const unsubscribe = firebase
            .firestore()
            .collection('names')
            .orderBy(SORT_OPTIONS[sortBy].column, SORT_OPTIONS[sortBy].direction)
            .onSnapshot((snapshot) => {
                const newNames = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))

                setNames(newNames);
        })

        return() => unsubscribe()

    }, [sortBy])

    return names;
}

// temporary array
const people = [
    "john",
    "steven",
    "jake",
    "ben"
];

const ProfList = () => {
    const [sortBy, setSortBy] = useState('NAME_ASC')
    const names = useNames(sortBy);

    const classes = useStyles();

    const handleChange = (event) => {
        setSortBy(event.target.value);
    };

    const [searchTerm, setSearchTerm] = React.useState("");
    const [searchResults, setSearchResults] = React.useState([]);
    const handleSearch = e => {
        setSearchTerm(e.target.value);
    };

    useEffect(() => {
        const results = people.filter(person =>
        person.toLowerCase().includes(searchTerm)
        );
        setSearchResults(results);
    }, [searchTerm]);

    return(
        <div>
            <Paper className={classes.paper}>
                <h1 className="text-align-center wrapword">Prof List</h1>
                <div className="row">
                    <div className={classes.search}>
                        <TextField 
                            id="outlined-search"
                            label="Search" 
                            type="search" 
                            variant="outlined" 
                            value={searchTerm}
                            onChange={handleSearch}
                        />
                    </div>
                    <FormControl variant="outlined" className={classes.formControl}>
                        <InputLabel id="demo-simple-select-outlined-label">Sort</InputLabel>
                        <Select
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            value={sortBy}
                            onChange={handleChange}
                            label="Sort"
                        >
                            <MenuItem value="NAME_ASC">Name Ascending</MenuItem>
                            <MenuItem value="NAME_DESC">Name Descending</MenuItem>
                            <MenuItem value="RATING_ASC">Rating Ascending</MenuItem>
                            <MenuItem value="RATING_DESC">Rating Descending</MenuItem>
                        </Select>
                    </FormControl>
                </div>

                {/* search test */}
                <ul>
                    {searchResults.map(item => (
                    <li>{item}</li>
                    ))}
                </ul>

                {/* actual data displayed from firebase */}
                <div id="display-search">
                    {names.map((name) => 
                        <Paper className={classes.paperRating}>
                            <div key={name.id}>
                                <div className="rating">
                                    <h3>{name.name}</h3>

                                    <div className="row">
                                        <Chip size="small" variant="outlined" label={name.subject} />
                                        &nbsp;
                                        <Rating name="half-rating-read" defaultValue={name.name_rating} precision={0.5} readOnly />
                                    </div>
                                </div>
                                <br></br>
                                <div className="rating-content wrapword">
                                    {name.name_comment}
                                </div>
                            </div>
                        </Paper>
                    )}
                </div>
            </Paper>
        </div>
    )
}

export default ProfList;