diff --git a/packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.js b/packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.tsx
similarity index 98%
rename from packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.js
rename to packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.tsx
index 1179d845d625..64ce02ba829c 100644
--- a/packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.js
+++ b/packages/components/src/components/form-submit-error-message/__test__/form-submit-error-message.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import FormSubmitErrorMessage from '../form-submit-error-message.jsx';
+import FormSubmitErrorMessage from '../form-submit-error-message';
 
 describe('<FormSubmitErrorMessage/>', () => {
     it('should render the message passed along with the icon', () => {
diff --git a/packages/components/src/components/form-submit-error-message/form-submit-error-message.jsx b/packages/components/src/components/form-submit-error-message/form-submit-error-message.tsx
similarity index 68%
rename from packages/components/src/components/form-submit-error-message/form-submit-error-message.jsx
rename to packages/components/src/components/form-submit-error-message/form-submit-error-message.tsx
index cac2b22575c1..1e787ef729fa 100644
--- a/packages/components/src/components/form-submit-error-message/form-submit-error-message.jsx
+++ b/packages/components/src/components/form-submit-error-message/form-submit-error-message.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import Icon from '../icon/icon';
 import Text from '../text';
 
-const FormSubmitErrorMessage = ({ className, message }) => (
+type TFormSubmitErrorMessage = {
+    className?: string;
+    message: string;
+};
+
+const FormSubmitErrorMessage = ({ className, message }: TFormSubmitErrorMessage) => (
     <div className={classNames('dc-form-submit-error-message', className)}>
         <Icon icon='IcAlertDanger' data_testid='form_submit_error' />
         <Text as='p' size='xxs' weight='bold' color='prominent'>
@@ -13,9 +17,4 @@ const FormSubmitErrorMessage = ({ className, message }) => (
     </div>
 );
 
-FormSubmitErrorMessage.propTypes = {
-    className: PropTypes.string,
-    message: PropTypes.string,
-};
-
 export default FormSubmitErrorMessage;
diff --git a/packages/components/src/components/form-submit-error-message/index.js b/packages/components/src/components/form-submit-error-message/index.ts
similarity index 54%
rename from packages/components/src/components/form-submit-error-message/index.js
rename to packages/components/src/components/form-submit-error-message/index.ts
index 2372ef9c6e60..7f2ba8ffd3be 100644
--- a/packages/components/src/components/form-submit-error-message/index.js
+++ b/packages/components/src/components/form-submit-error-message/index.ts
@@ -1,4 +1,4 @@
-import FormSubmitErrorMessage from './form-submit-error-message.jsx';
+import FormSubmitErrorMessage from './form-submit-error-message';
 import './form-submit-error-message.scss';
 
 export default FormSubmitErrorMessage;