stop relay modern useLazyLoadQuery refetching in a pagination when data is available in cache?

Question

i have this pagination in relay modern:

const CategoryContent = () => {
  const { categoryQuery } = useRoute<CategoryContentScreenRouteProp>().params;
  const { viewer } = useLazyLoadQuery<CategoryContentQuery>(
    graphql`
      query CategoryContentQuery(
        $count: Int
        $cursor: String
        $category: String
      ) {
        viewer {
          ...InfiniteCategories_viewer
            @arguments(count: $count, cursor: $cursor, category: $category)
        }
      }
    `,
    { count: 7, category: categoryQuery }
  );
  //console.log("CategoryContent viewer", viewer);
  return (
    <Suspense fallback={<LoadingView />}>
      <View>
        <Text>CategoryContent</Text>
      </View>
      <InfiniteCategories viewer={viewer} />
    </Suspense>
  );
};

and this is the infinite pagination:

const InfiniteCategories = ({
  viewer,
}: {
  viewer: InfiniteCategories_viewer$key;
}) => {
  const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
    InfiniteCategoriesPaginationQuery,
    any
  >(
    graphql`
      fragment InfiniteCategories_viewer on Viewer
      @argumentDefinitions(
        count: { type: "Int", defaultValue: 7 }
        cursor: { type: "String", defaultValue: null }
        category: { type: "String" }
      )
      @refetchable(queryName: "InfiniteCategoriesPaginationQuery") {
        merchants(first: $count, after: $cursor, category: $category)
          @connection(key: "InfiniteCategories_viewer_merchants") {
          pageInfo {
            startCursor
            endCursor
          }
          edges {
            node {
              id
              category
              logo
              createdAt
              isFavorite
              pk
              name
            }
          }
        }
      }
    `,
    viewer
  );
  console.log("data InfiniteCategories", data);
  return (
    <StyledFlatList
      {...{
        data:
          data && data.merchants && data.merchants.edges
            ? data.merchants.edges
            : [],
        contentContainerStyle: styles.contentContainerStyle,
        showsVerticalScrollIndicator: false,
        keyExtractor: ({ cursor }) => cursor,
        renderItem: ({ item }) => (
          <View>
            <Text>{item.node.name}</Text>
          </View>
        ),
        ListFooterComponent: () => {
          if (isLoadingNext) return <ActivityIndicator />;
          if (hasNext)
            return (
              <LoadMoreButton
                onPress={() => {
                  loadNext(7);
                }}
              />
            );
          return null;
        },
      }}
    />
  );
};

however my problem is in every render like when i get back to the screen, it's being loaded again? how can i stop it from happening since it's pagination, user would have to do load more again to regain its' data, and i don't want that?