fix: fixed Pagination, NextLink and PreviousLink return types (#1774)

* fix: fixed Pagination, NextLink and PreviousLink return types

.changeset/popular-zebras-study.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fixed Pagination, PreviousLink and NextLink types

packages/hydrogen/src/pagination/Pagination.ts

@@ -4,8 +4,8 @@ import {
   useMemo,
   useRef,
   forwardRef,
-  type ReactNode,
   type Ref,
+  type FC,
 } from 'react';
 import type {
   Maybe,
@@ -49,13 +49,9 @@ interface PaginationInfo<NodesType> {
   /** The paginated array of nodes. You should map over and render this array. */
   nodes: Array<NodesType>;
   /** The `<NextLink>` is a helper component that makes it easy to navigate to the next page of paginated data. Alternatively you can build your own `<Link>` component: `<Link to={nextPageUrl} state={state} preventScrollReset />` */
-  NextLink: (
-    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
-  ) => ReactNode;
+  NextLink: FC<Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>}>;
   /** The `<PreviousLink>` is a helper component that makes it easy to navigate to the previous page of paginated data. Alternatively you can build your own `<Link>` component: `<Link to={previousPageUrl} state={state} preventScrollReset />` */
-  PreviousLink: (
-    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
-  ) => ReactNode;
+  PreviousLink: FC<Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>}>;
   /** The URL to the previous page of paginated data. Use this prop to build your own `<Link>` component. */
   previousPageUrl: string;
   /** The URL to the next page of paginated data. Use this prop to build your own `<Link>` component. */
@@ -84,9 +80,7 @@ type PaginationProps<NodesType> = {
   children: PaginationRenderProp<NodesType>;
 };
 
-type PaginationRenderProp<NodesType> = (
-  props: PaginationInfo<NodesType>,
-) => ReactNode;
+type PaginationRenderProp<NodesType> = FC<PaginationInfo<NodesType>>;
 
 /**
  *
@@ -102,7 +96,7 @@ export function Pagination<NodesType>({
     console.warn('<Pagination> requires children to work properly');
     return null;
   },
-}: PaginationProps<NodesType>) {
+}: PaginationProps<NodesType>): ReturnType<FC> {
   const transition = useNavigation();
   const isLoading = transition.state === 'loading';
   const {