Rendering useInstantSearch() for Insights Events inside <InstantSearch /> Component resets uiState

We just recently used Algolia for our app. It works fine, but when I added this code to implement insights, the uiState gets reset when it is rendered.

import { useLayoutEffect, } from 'react'
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares'
import { useInstantSearch } from 'react-instantsearch-hooks-web'
import aa from 'search-insights'

const SiteInsights = () => {
  const { use, } = useInstantSearch()

  useLayoutEffect(() => {
    const middleware = createInsightsMiddleware({
      insightsClient: aa
    })

    return use(middleware)
  }, [use])

  return null
}

export default SiteInsights

This is rendered on a top level layout, and is only enabled by withSearchInsights prop. On the actual results page, I have a <Configure /> component for initial results filtering.

Am I missing something, or there’s something wrong with my implementation?