Header in components - first click doesn't respond

[jamezening]

Hi,

using verison ^4.3.10.

Passing a Header to components in the Virtuoso component.
The first click on the Header isn't responsive (subsequent clicks work as expected).

      <Virtuoso
        ...
        components={{
          Header: () => (
            <>
              <Header onClick={onClick}>Recent</Header>
            </>
          ),
        }}
      />

Has anyone run into this issue / is there a solution?

Thank you.

[baryosef-loops]

I was able to fix similar issue by using useCallback as noted here: #405 (comment)

Anything you pass in the components should be cached, either hoisted to the top (best if doable) or with useCallback or useMemo hooks. Right now, on each render you pass a new instance of the component.