react-instantsearch refine function doesn't affect currentRefinement

Question

I am trying to use the new hook syntax from react-instantsearch with our custom pagination component, however, the refine function never changes the value of currentRefinement, which also always shows as 0. So you always see the same results, no matter how many times you hit next page.

I had wondered if it was because I was passing props to the component where it is rendered (as the props are passed as a whole to the usePagination hook), but removing them doesn't seem to have any effect:

<AlgoliaPagination
  hitsPerPage={hitsPerPage}
  totalHitCount={totalHitCount}
/>

Any help much appreciated!

const AlgoliaPagination: FC<IAlgoliaPaginationProps> = (props) => {
  const {
    currentRefinement,
    nbPages,
    isFirstPage,
    isLastPage,
    refine,
    createURL,
  } = usePagination(props);

  const { hitsPerPage, totalHitCount } = props;

  useEffect(() => {
    refine(2)             // doesn't change currentRefinement

    refine(currentRefinement);     // doesn't change it either
  }, [currentRefinement]);

  return (
    <div className={styles.paginationRow}>
      {nbPages > 1 && (
        <div style={{ width: '20rem', height: '10px', display: 'flex' }}>
          <div
            style={{
              width: (currentRefinement / nbPages) * 100 + '%',
              backgroundColor: '#0E872E',
              height: '100%',
            }}
          ></div>
          <div
            style={{
              width: (1 - currentRefinement / nbPages) * 100 + '%',
              backgroundColor: '#0E872E',
              opacity: '0.3',
              height: '100%',
            }}
          ></div>
        </div>
      )}
      <div style={{ display: 'flex', gap: '1rem' }}>
        {!isFirstPage && (
          <div
            onClick={(event) => {
              event.preventDefault();
              refine(currentRefinement - 1);
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
          >
            <LinkButton
              link={createURL(currentRefinement - 1)}
              title={`Load previous ${hitsPerPage} results`}
              colorClasses={'stemGreenBg styled-thin-btn text-white'}
              disableScroll={true}
              target="_self"
            />
          </div>
        )}
        {!isLastPage && (
          <div
            onClick={(event) => {
              event.preventDefault();
              refine(currentRefinement + 1);
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
          >
            <LinkButton
              link={createURL(currentRefinement + 1)}
              title={`Load next ${
                isLastPage
                  ? totalHitCount - hitsPerPage * currentRefinement
                  : hitsPerPage
              } results`}
              colorClasses={'stemGreenBg styled-thin-btn text-white'}
              disableScroll={true}
              target="_self"
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default AlgoliaPagination;