diff --git a/src/components/PinButton.js b/src/components/PinButton.js
deleted file mode 100644
index 182e49054100..000000000000
--- a/src/components/PinButton.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import reportPropTypes from '@pages/reportPropTypes';
-import * as Report from '@userActions/Report';
-import * as Session from '@userActions/Session';
-import CONST from '@src/CONST';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import Tooltip from './Tooltip';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** Report to pin */
-    report: reportPropTypes,
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    report: null,
-};
-
-function PinButton(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    return (
-        <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
-            <PressableWithFeedback
-                onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
-                style={[styles.touchableButtonImage]}
-                ariaChecked={props.report.isPinned}
-                accessibilityLabel={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}
-                role={CONST.ROLE.BUTTON}
-            >
-                <Icon
-                    src={Expensicons.Pin}
-                    fill={props.report.isPinned ? theme.heading : theme.icon}
-                />
-            </PressableWithFeedback>
-        </Tooltip>
-    );
-}
-
-PinButton.displayName = 'PinButton';
-PinButton.propTypes = propTypes;
-PinButton.defaultProps = defaultProps;
-
-export default withLocalize(PinButton);
diff --git a/src/components/PinButton.tsx b/src/components/PinButton.tsx
new file mode 100644
index 000000000000..2ae74853d571
--- /dev/null
+++ b/src/components/PinButton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ReportActions from '@userActions/Report';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import type {Report} from '@src/types/onyx';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import Tooltip from './Tooltip';
+
+type PinButtonProps = {
+    /** Report to pin */
+    report: Report;
+};
+
+function PinButton({report}: PinButtonProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <Tooltip text={report.isPinned ? translate('common.unPin') : translate('common.pin')}>
+            <PressableWithFeedback
+                onPress={Session.checkIfActionIsAllowed(() => ReportActions.togglePinnedState(report.reportID, report.isPinned ?? false))}
+                style={styles.touchableButtonImage}
+                accessibilityLabel={report.isPinned ? translate('common.unPin') : translate('common.pin')}
+                role={CONST.ROLE.BUTTON}
+            >
+                <Icon
+                    src={Expensicons.Pin}
+                    fill={report.isPinned ? theme.heading : theme.icon}
+                />
+            </PressableWithFeedback>
+        </Tooltip>
+    );
+}
+
+PinButton.displayName = 'PinButton';
+
+export default PinButton;