diff --git a/packages/react/src/components/DataTable/TableActionList.js b/packages/react/src/components/DataTable/TableActionList.ts
similarity index 100%
rename from packages/react/src/components/DataTable/TableActionList.js
rename to packages/react/src/components/DataTable/TableActionList.ts
diff --git a/packages/react/src/components/DataTable/TableHead.tsx b/packages/react/src/components/DataTable/TableHead.tsx
index ad5ec19fee07..d615ca317ac8 100644
--- a/packages/react/src/components/DataTable/TableHead.tsx
+++ b/packages/react/src/components/DataTable/TableHead.tsx
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { ThHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 import wrapComponent from '../../tools/wrapComponent';
 
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
 
-const TableHead: React.FC<TableHeadProps> = wrapComponent({
+const TableHead = wrapComponent({
   name: 'TableHead',
   type: 'thead',
 });
diff --git a/packages/react/src/tools/wrapComponent.js b/packages/react/src/tools/wrapComponent.ts
similarity index 72%
rename from packages/react/src/tools/wrapComponent.js
rename to packages/react/src/tools/wrapComponent.ts
index f99dfbd54cbe..95d02e101959 100644
--- a/packages/react/src/tools/wrapComponent.js
+++ b/packages/react/src/tools/wrapComponent.ts
@@ -5,16 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { usePrefix } from '../internal/usePrefix';
+import { ReactAttr } from '../types/common';
+
+type HTMLTagName = keyof HTMLElementTagNameMap;
+
+type WrapComponentArgs<T extends HTMLTagName> = {
+  name: string;
+  type: T;
+  className?: string | ((prefix: string) => string);
+};
 
 /**
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-const wrapComponent = ({ name, className: getClassName, type }) => {
+const wrapComponent = <T extends HTMLTagName>({
+  name,
+  className: getClassName,
+  type,
+}: WrapComponentArgs<T>): ((props: ReactAttr<T>) => React.ReactElement) => {
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
@@ -41,7 +54,7 @@ const wrapComponent = ({ name, className: getClassName, type }) => {
     className: PropTypes.string,
   };
 
-  return Component;
+  return Component as (props: ReactAttr<T>) => React.ReactElement;
 };
 
 export default wrapComponent;