diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 66d2c072fcdb..000000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "deepscan.enable": true
-}
\ No newline at end of file
diff --git a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
index 853c213b2ce7..c4ac39e0c112 100644
--- a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
@@ -106,6 +106,31 @@ describe('renderJsx', () => {
        />
     `);
   });
+
+  it('forwardRef component', () => {
+    const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) {
+      return <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyExoticComponent>I'm forwardRef!</MyExoticComponent>, {}))
+      .toMatchInlineSnapshot(`
+        <MyExoticComponent>
+          I'm forwardRef!
+        </MyExoticComponent>
+      `);
+  });
+
+  it('memo component', () => {
+    const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
+      return <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyMemoComponent>I'm memo!</MyMemoComponent>, {})).toMatchInlineSnapshot(`
+      <MyMemoComponent>
+        I'm memo!
+      </MyMemoComponent>
+    `);
+  });
 });
 
 // @ts-ignore
diff --git a/addons/docs/src/frameworks/react/jsxDecorator.tsx b/addons/docs/src/frameworks/react/jsxDecorator.tsx
index 5069995fd397..b51e1a77041d 100644
--- a/addons/docs/src/frameworks/react/jsxDecorator.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.tsx
@@ -87,7 +87,16 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
   const displayNameDefaults =
     typeof options.displayName === 'string'
       ? { showFunctions: true, displayName: () => options.displayName }
-      : {};
+      : {
+          // To get exotic component names resolving properly
+          displayName: (el: any): string =>
+            el.type.displayName ||
+            (el.type.name !== '_default' ? el.type.name : null) ||
+            (typeof el.type === 'function' ? 'No Display Name' : null) ||
+            (el.type.$$typeof === Symbol.for('react.forward_ref') ? el.type.render.name : null) ||
+            (el.type.$$typeof === Symbol.for('react.memo') ? el.type.type.name : null) ||
+            el.type,
+        };
 
   const filterDefaults = {
     filterProps: (value: any, key: string): boolean => value !== undefined,
diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
index 2de324de9060..74b3ce502dc4 100644
--- a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
+++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -4,19 +4,25 @@ import { DocgenButton } from '../../components/DocgenButton';
 export default {
   title: 'Addons/Docs/ForwardRef',
   component: ForwardedButton,
-  parameters: { chromatic: { disable: true } },
+  parameters: {
+    chromatic: { disable: true },
+    docs: { source: { type: 'dynamic' } },
+  },
 };
 
-const ForwardedButton = React.forwardRef((props = { label: '' }, ref) => (
-  <DocgenButton ref={ref} {...props} />
-));
+const ForwardedButton = React.forwardRef(function ForwardedButton(props = { label: '' }, ref) {
+  return <DocgenButton ref={ref} {...props} />;
+});
 export const DisplaysCorrectly = () => <ForwardedButton label="hello" />;
 DisplaysCorrectly.storyName = 'Displays forwarded ref components correctly (default props)';
 
-// eslint-disable-next-line react/prop-types
-const ForwardedDestructuredButton = React.forwardRef(({ label = '', ...props }, ref) => (
-  <DocgenButton ref={ref} label={label} {...props} />
-));
+const ForwardedDestructuredButton = React.forwardRef(function ForwardedDestructuredButton(
+  // eslint-disable-next-line react/prop-types
+  { label = '', ...props },
+  ref
+) {
+  return <DocgenButton ref={ref} label={label} {...props} />;
+});
 export const AlsoDisplaysCorrectly = () => <ForwardedDestructuredButton label="hello" />;
 AlsoDisplaysCorrectly.storyName =
   'Displays forwarded ref components correctly (destructured props)';
diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/memo.stories.js
similarity index 58%
rename from examples/official-storybook/stories/addon-docs/react-memo.stories.js
rename to examples/official-storybook/stories/addon-docs/memo.stories.js
index 44c0a1fe7845..6c41f65da2fb 100644
--- a/examples/official-storybook/stories/addon-docs/react-memo.stories.js
+++ b/examples/official-storybook/stories/addon-docs/memo.stories.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { DocgenButton } from '../../components/DocgenButton';
 
-const ButtonWithMemo = React.memo((props) => <DocgenButton {...props} />);
+const ButtonWithMemo = React.memo(DocgenButton);
 
 export default {
-  title: 'Addons/Docs/ButtonWithMemo',
+  title: 'Addons/Docs/Memo',
   component: ButtonWithMemo,
-  parameters: { chromatic: { disable: true } },
+  parameters: {
+    chromatic: { disable: true },
+    docs: { source: { type: 'dynamic' } },
+  },
 };
 
-export const displaysCorrectly = () => <ButtonWithMemo label="Hello World" />;
+export const displaysCorrectly = () => <ButtonWithMemo label="Hello memo World" />;
 displaysCorrectly.storyName = 'Displays components with memo correctly';
diff --git a/lib/cli/versions.json b/lib/cli/versions.json
index 654ba07d0f87..4548a41e3f93 100644
--- a/lib/cli/versions.json
+++ b/lib/cli/versions.json
@@ -52,4 +52,4 @@
   "@storybook/ui": "6.1.0-alpha.19",
   "@storybook/vue": "6.1.0-alpha.19",
   "@storybook/web-components": "6.1.0-alpha.19"
-}
\ No newline at end of file
+}