From 60f767207cab2d3394c74d64c6cf8bfbad8185fe Mon Sep 17 00:00:00 2001
From: Nuey San Waldman <nswaldman@gmail.com>
Date: Tue, 5 Dec 2023 11:23:45 +0100
Subject: [PATCH] Update example to use ReactNode over ReactElement

---
 .../PolymorphicComponentProps.mdx             | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/types/PolymorphicComponentProps/PolymorphicComponentProps.mdx b/src/types/PolymorphicComponentProps/PolymorphicComponentProps.mdx
index 1d1d27e..d51ab55 100644
--- a/src/types/PolymorphicComponentProps/PolymorphicComponentProps.mdx
+++ b/src/types/PolymorphicComponentProps/PolymorphicComponentProps.mdx
@@ -19,7 +19,7 @@ type FooComponentProps<T extends ElementType> = PolymorphicComponentProps<
   { barProp: string | undefined }
 >;
 
-type FooComponent = <T extends ElementType>(props: FooComponentProps<T>) => ReactElement | null;
+type FooComponent = <T extends ElementType>(props: FooComponentProps<T>) => ReactNode | null;
 
 export const Foo: FooComponent = <T extends ElementType>({
   as: Component = 'div',
@@ -68,16 +68,18 @@ type FooComponentProps<T extends ElementType> = PolymorphicComponentPropsWithRef
   { barProp: string | undefined }
 >;
 
-type FooComponent = <T extends ElementType>(props: FooComponentProps<T>) => ReactElement | null;
-
-export const Foo: FooComponent = <T extends ElementType>(
-  { as: Component = 'div', children, ...otherProps }: FooComponentProps<T>,
-  ref?: PolymorphicRef<T>,
-) => {
-  return (
-    <Component {...otherProps} ref={ref}>
-      {children}
-    </Component>
-  );
-};
+type FooComponent = <T extends ElementType>(props: FooComponentProps<T>) => ReactNode | null;
+
+export const Foo: FooComponent = forwardRef(
+  <T extends ElementType>(
+    { as: Component = 'div', children, ...otherProps }: FooComponentProps<T>,
+    ref?: PolymorphicRef<T>,
+  ) => {
+    return (
+      <Component {...otherProps} ref={ref}>
+        {children}
+      </Component>
+    );
+  },
+);
 ```