diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx b/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx
index 522d34294ae..ec054e81389 100644
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-export const Page: React.VFC = () => {
+export const Page: React.FC = () => {
   const [user, setUser] = React.useState<User>();
 
   return (
diff --git a/code/renderers/react/template/cli/ts-legacy/Page.tsx b/code/renderers/react/template/cli/ts-legacy/Page.tsx
index 8d048fa1088..885f2b41f1e 100644
--- a/code/renderers/react/template/cli/ts-legacy/Page.tsx
+++ b/code/renderers/react/template/cli/ts-legacy/Page.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-export const Page: React.VFC = () => {
+export const Page: React.FC = () => {
   const [user, setUser] = React.useState<User>();
 
   return (
diff --git a/code/renderers/react/template/cli/ts/Page.tsx b/code/renderers/react/template/cli/ts/Page.tsx
index 522d34294ae..ec054e81389 100644
--- a/code/renderers/react/template/cli/ts/Page.tsx
+++ b/code/renderers/react/template/cli/ts/Page.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-export const Page: React.VFC = () => {
+export const Page: React.FC = () => {
   const [user, setUser] = React.useState<User>();
 
   return (
diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
index 58d19961e0c..b17e16e84d6 100644
--- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
+++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // CustomDocumentationComponent.ts|tsx
 
-export const CustomDocumentationComponent: React.VFC = () => {
+export const CustomDocumentationComponent: React.FC = () => {
   return (
     <div>
       <h1>Replacing DocsPage with a custom component</h1>