Apollo Client fetchMore doesn't merge previous and fetchMoreResult correctly in React app

Question

I am using React v17 and Apollo Client v3.9.5.

I am building an infinite list. Somehow the previous results and fetchMoreResult are not merging correctly. I get duplicated results.

This is the React component:

const InfiniteList = ({ pageId }: Props) => {
  const { data, loading, networkStatus, fetchMore } = useQuery<GqlRes, InfiniteListItemsArgs>(
    GET_ITEMS,
    {
      variables: {
        termId: pageId,
        page: 0,
      },
      errorPolicy: "all",
      notifyOnNetworkStatusChange: true,
    },
  );

  const isFetchingMore = networkStatus === NetworkStatus.fetchMore;

  const fetchNextPage = () => {
    if (!data?.myItems.pager.hasNextPage) {
  return null;
}
fetchMore({
  variables: {
    page: (data?.myItems.pager.page || 0) + 1,
  },
  updateQuery: (previousResult, { fetchMoreResult }) => {
    const newItems = fetchMoreResult?.myItems.items;
    const newPager = fetchMoreResult?.myItems.pager;

    if (!fetchMoreResult) {
      return previousResult;
    }

    return {
      myItems: {
        pager: newPager,
        items: [...previousResult.myItems.items, ...newItems],
        __typename: "MyList",
      },
    };
  },
});
  };

  const myListItems = data?.myItems?.items as MyTeasers[];

  if (!taxonomyItems?.length) {
    return null;
  }

  return (
    <div>
      <ItemsGrid items={myListItems} />
      <Waypoint topOffset="50px" key={data?.myItems?.pager?.page} onEnter={fetchNextPage} />
      {(loading || isFetchingMore) && (
        <CircularProgress />
      )}
    </div>
  );
};

export default InfiniteList;

Note: When using fetchNextPage function with React useCallback (and add its depps) it's working fine. Why is that?

Does anybody see something strange which can cause the issue?