diff --git a/scripts/create-component/plop-templates-component/src/components/{{componentName}}/{{componentName}}.tsx.hbs b/scripts/create-component/plop-templates-component/src/components/{{componentName}}/{{componentName}}.tsx.hbs
index e14117e1bc2bdb..788e2117644df7 100644
--- a/scripts/create-component/plop-templates-component/src/components/{{componentName}}/{{componentName}}.tsx.hbs
+++ b/scripts/create-component/plop-templates-component/src/components/{{componentName}}/{{componentName}}.tsx.hbs
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { use{{componentName}} } from './use{{componentName}}';
-import { {{componentName}}Props } from './{{componentName}}.types';
 import { render{{componentName}} } from './render{{componentName}}';
 import { use{{componentName}}Styles } from './use{{componentName}}Styles';
+import type { {{componentName}}Props } from './{{componentName}}.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * {{componentName}} component
  */
-export const {{componentName}} = React.forwardRef<HTMLElement, {{componentName}}Props>((props, ref) => {
+export const {{componentName}}: ForwardRefComponent<{{componentName}}Props> = React.forwardRef((props, ref) => {
   const state = use{{componentName}}(props, ref);
 
   use{{componentName}}Styles(state);