Tengo un retraso con el useState o el estado que le asigne para el input, es un retraso de una letra. Estuve investigando y encontre que ...

Tengo un retraso con el useState o el estado que le asigne para el input, es un retraso de una letra. Estuve investigando y encontre que es debido a que el setState hace la asignación de manera asincrona. Sin embargo me gustaría saber si alguién conoce una solución para esto

mi codigo:

function SearchBar(props) {
    const [query, setQuery] = React.useState("")
    const [searchedBadges, setSearchedBadges] = React.useState(props.badges)
    React.useMemo(()=> {
        const result =  props.badges.filter(badge => {
            const Localquery = `${badge.firstName} ${badge.lastName}`.toLowerCase()
            return Localquery.includes(query.toLowerCase())
        })
        setSearchedBadges(result)
    }, [props.badges, query])

    const toSearch = e => {
        setQuery(e.target.value)
        props.onSearch(searchedBadges)
        console.log(searchedBadges)
        console.log(query)
        console.log(e.target.value)
    }

    return (
        <React.Fragment>
            <div className="searchContainer">
                <label className="searchContainer_label" htmlFor="searchBar">Search in Platzi</label>
                <input value={query} type="text" className="searchContainer_bar" id="searchBar" 
                placeholder="Search for badges" onChange={toSearch} />
            </div>
        </React.Fragment>
    )
}

export default SearchBar;