useInfiniteHits + useMenu bug with pagination

Open Q&A
1

The essence of the bug is that when switching filters, the page does not reset to 0. Consequently, an incorrect amount of content is displayed. Additionally, if I switch filters, not all content is displayed - for example, for the “articles” type, I have 95 hits, but I can only see 70 of them. I would be very grateful for any tips and help with fixing this issue.

I have search container:

 <InstantSearch searchClient={searchClient} indexName="announcements">
        <Configure hitsPerPage={4} filters={filters} />

        <SearchInput  />

         <ContentFilter />

        <SearchList  />
 </InstantSearch>

filters in Configure:

 const filters = [
    'status:published',
  ]
    .filter(Boolean)
    .join(' AND ')

in ContentFilter component I use useMenu hook and useClearRefinements. The general logic is that we can filter by type or categoryTitle:

const { refine: refineType } = useMenu({
    attribute: 'type',
  })

  const { refine: refineCategoryTitle } = useMenu({
    attribute: 'categoryTitle',
  })

  const { refine: clearRefine } = useClearRefinements({
    includedAttributes: ['categoryTitle', 'type'],
  })

  const onPress = (e: any) => {
    setFilter(e)
    if (e.filter === 'All') {
      clearRefine()
    } else if (e.attribute === 'type') {
      clearRefine()
      refineType(e.filter)
    } else {
      clearRefine()
      refineCategoryTitle(e.filter)
    }
  }

and SearchList use useInfiniteHits hook.