diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md
index 3318d8499ce..afeec4f17a8 100644
--- a/content/docs/forwarding-refs.md
+++ b/content/docs/forwarding-refs.md
@@ -67,7 +67,7 @@ For example, the following component will appear as "*ForwardRef*" in the DevToo
 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(Button)*"):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
diff --git a/examples/forwarding-refs/wrapped-component-with-function-name.js b/examples/forwarding-refs/wrapped-component-with-function-name.js
index f68b5c5d990..8bcfe74a933 100644
--- a/examples/forwarding-refs/wrapped-component-with-function-name.js
+++ b/examples/forwarding-refs/wrapped-component-with-function-name.js
@@ -1,5 +1,10 @@
-const WrappedComponent = React.forwardRef(
-  function myFunction(props, ref) {
-    return <LogProps {...props} forwardedRef={ref} />;
-  }
-);
+const FancyButton = React.forwardRef(function Button(
+  props,
+  ref
+) {
+  return (
+    <button ref={ref} className="FancyButton">
+      {props.children}
+    </button>
+  );
+});
diff --git a/examples/forwarding-refs/wrapped-component.js b/examples/forwarding-refs/wrapped-component.js
index f20e7f5918d..7f8041cdae8 100644
--- a/examples/forwarding-refs/wrapped-component.js
+++ b/examples/forwarding-refs/wrapped-component.js
@@ -1,3 +1,7 @@
-const WrappedComponent = React.forwardRef((props, ref) => {
-  return <LogProps {...props} forwardedRef={ref} />;
+const FancyButton = React.forwardRef((props, ref) => {
+  return (
+    <button ref={ref} className="FancyButton">
+      {props.children}
+    </button>
+  );
 });