diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 15c1f20cf8e2..84f42142942e 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,13 +1,12 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
-import HeaderGapComponent from './types';
+import HeaderGapProps from './types';
 
-// eslint-disable-next-line react/function-component-definition
-const HeaderGap: HeaderGapComponent = ({styles}) => {
+function HeaderGap({styles}: HeaderGapProps) {
     const themeStyles = useThemeStyles();
     return <View style={[themeStyles.headerGap, styles]} />;
-};
+}
 
 HeaderGap.displayName = 'HeaderGap';
 
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
index decb634b5e8e..c17ba58b470c 100644
--- a/src/components/HeaderGap/index.tsx
+++ b/src/components/HeaderGap/index.tsx
@@ -1,7 +1,11 @@
-import HeaderGapComponent from './types';
+import {ReactNode} from 'react';
+import HeaderGapProps from './types';
 
-// eslint-disable-next-line react/function-component-definition
-const HeaderGap: HeaderGapComponent = () => null;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function HeaderGap({styles}: HeaderGapProps): ReactNode {
+    return null;
+}
 
 HeaderGap.displayName = 'HeaderGap';
+
 export default HeaderGap;
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
index 55ff1fe6eef6..6ed527b1c1f2 100644
--- a/src/components/HeaderGap/types.ts
+++ b/src/components/HeaderGap/types.ts
@@ -1,10 +1,7 @@
-import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 
 type HeaderGapProps = {
     styles?: StyleProp<ViewStyle>;
 };
 
-type HeaderGapComponent = React.FunctionComponent<HeaderGapProps>;
-
-export default HeaderGapComponent;
+export default HeaderGapProps;