Items doesn't get filtered after changing

[H7ioo]

After something is typed in the search bar I make a request to an endpoint and get new items to render. The problem is that the new items that I fetched don't show because the filter function already ran on the old data.
(typing => filter function runs)
(new data received => filter function doesn't run because nothing new typed in the search bar)

How can I fix this behavior?
Nextjs

[H7ioo]

I set shouldFilter to false and made my own filtering

[lucsmachado]

Ran into this and my solution was to simply set the shouldFilter flag to always be the opposite of my loading state.
Here's an example:

const [loading, setLoading] = React.useState(false)
const [items, setItems] = React.useState([])

React.useEffect(() => {
  async function getItems() {
    setLoading(true)
    const res = await api.get('/dictionary')
    setItems(res)
    setLoading(false)
  }

  getItems()
}, [])

return (
  <Command shouldFilter={!loading}>
    <Command.Input />
    <Command.List>
      {loading && <Command.Loading>Fetching words…</Command.Loading>}
      {items.map((item) => {
        return (
          <Command.Item key={`word-${item}`} value={item}>
            {item}
          </Command.Item>
        )
      })}
    </Command.List>
  </Command>
)

This way, the filter function only runs once the promise is resolved and it will run with whatever the current value of the search input is.
Hope this helps!