diff --git a/package-lock.json b/package-lock.json
index 2b32065e96bb..b34cde433719 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "react-native": "0.72.4",
         "react-native-android-location-enabler": "^1.2.2",
         "react-native-blob-util": "^0.17.3",
-        "react-native-collapsible": "^1.6.0",
+        "react-native-collapsible": "^1.6.1",
         "react-native-config": "^1.4.5",
         "react-native-dev-menu": "^4.1.1",
         "react-native-device-info": "^10.3.0",
@@ -44080,8 +44080,9 @@
       }
     },
     "node_modules/react-native-collapsible": {
-      "version": "1.6.0",
-      "license": "MIT",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz",
+      "integrity": "sha512-orF4BeiXd2hZW7fu9YcqIJXzN6TJcFcddY807D3MAOVktLuW9oQ+RIkrTJ5DR3v9ZOFfREkOjEmS79qeUTvkBQ==",
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
@@ -84475,7 +84476,9 @@
       "dev": true
     },
     "react-native-collapsible": {
-      "version": "1.6.0",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz",
+      "integrity": "sha512-orF4BeiXd2hZW7fu9YcqIJXzN6TJcFcddY807D3MAOVktLuW9oQ+RIkrTJ5DR3v9ZOFfREkOjEmS79qeUTvkBQ==",
       "requires": {}
     },
     "react-native-config": {
diff --git a/package.json b/package.json
index c72d52ab4bba..e68f10940d6a 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "react-native": "0.72.4",
     "react-native-android-location-enabler": "^1.2.2",
     "react-native-blob-util": "^0.17.3",
-    "react-native-collapsible": "^1.6.0",
+    "react-native-collapsible": "^1.6.1",
     "react-native-config": "^1.4.5",
     "react-native-dev-menu": "^4.1.1",
     "react-native-device-info": "^10.3.0",
diff --git a/src/components/CollapsibleSection/Collapsible/index.js b/src/components/CollapsibleSection/Collapsible/index.js
deleted file mode 100644
index 51d650ed5748..000000000000
--- a/src/components/CollapsibleSection/Collapsible/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Collapsible from 'react-collapse';
-
-export default Collapsible;
diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js
deleted file mode 100644
index 9b800304beeb..000000000000
--- a/src/components/CollapsibleSection/Collapsible/index.native.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import CollapsibleRN from 'react-native-collapsible';
-
-const propTypes = {
-    /** Whether the section should start expanded. False by default */
-    isOpened: PropTypes.bool,
-
-    /** Children to display inside the Collapsible component */
-    children: PropTypes.node.isRequired,
-};
-
-const defaultProps = {
-    isOpened: false,
-};
-
-function Collapsible(props) {
-    return <CollapsibleRN collapsed={!props.isOpened}>{props.children}</CollapsibleRN>;
-}
-
-Collapsible.displayName = 'Collapsible';
-Collapsible.propTypes = propTypes;
-Collapsible.defaultProps = defaultProps;
-export default Collapsible;
diff --git a/src/components/CollapsibleSection/Collapsible/index.native.tsx b/src/components/CollapsibleSection/Collapsible/index.native.tsx
new file mode 100644
index 000000000000..e8d3dc9439d0
--- /dev/null
+++ b/src/components/CollapsibleSection/Collapsible/index.native.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import CollapsibleRN from 'react-native-collapsible';
+import CollapsibleProps from './types';
+
+function Collapsible({isOpened = false, children}: CollapsibleProps) {
+    return <CollapsibleRN collapsed={!isOpened}>{children}</CollapsibleRN>;
+}
+
+Collapsible.displayName = 'Collapsible';
+export default Collapsible;
diff --git a/src/components/CollapsibleSection/Collapsible/index.tsx b/src/components/CollapsibleSection/Collapsible/index.tsx
new file mode 100644
index 000000000000..2585fd92f42b
--- /dev/null
+++ b/src/components/CollapsibleSection/Collapsible/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import {Collapse} from 'react-collapse';
+import CollapsibleProps from './types';
+
+function Collapsible({isOpened = false, children}: CollapsibleProps) {
+    return <Collapse isOpened={isOpened}>{children}</Collapse>;
+}
+export default Collapsible;
diff --git a/src/components/CollapsibleSection/Collapsible/types.ts b/src/components/CollapsibleSection/Collapsible/types.ts
new file mode 100644
index 000000000000..8b8e8aba6860
--- /dev/null
+++ b/src/components/CollapsibleSection/Collapsible/types.ts
@@ -0,0 +1,8 @@
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type CollapsibleProps = ChildrenProps & {
+    /** Whether the section should start expanded. False by default */
+    isOpened?: boolean;
+};
+
+export default CollapsibleProps;
diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js
deleted file mode 100644
index 46210e57f543..000000000000
--- a/src/components/CollapsibleSection/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import Text from '@components/Text';
-import styles from '@styles/styles';
-import CONST from '@src/CONST';
-import Collapsible from './Collapsible';
-
-const propTypes = {
-    /** Title of the Collapsible section */
-    title: PropTypes.string.isRequired,
-
-    /** Children to display inside the Collapsible component */
-    children: PropTypes.node.isRequired,
-};
-
-class CollapsibleSection extends React.Component {
-    constructor(props) {
-        super(props);
-        this.toggleSection = this.toggleSection.bind(this);
-        this.state = {
-            isExpanded: false,
-        };
-    }
-
-    /**
-     * Expands/collapses the section
-     */
-    toggleSection() {
-        this.setState((prevState) => ({
-            isExpanded: !prevState.isExpanded,
-        }));
-    }
-
-    render() {
-        const src = this.state.isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow;
-
-        return (
-            <View style={styles.mt4}>
-                <PressableWithFeedback
-                    onPress={this.toggleSection}
-                    style={[styles.pb4, styles.flexRow]}
-                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                    accessibilityLabel={this.props.title}
-                    hoverDimmingValue={1}
-                    pressDimmingValue={0.2}
-                >
-                    <Text
-                        style={[styles.flex1, styles.textStrong, styles.userSelectNone]}
-                        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-                    >
-                        {this.props.title}
-                    </Text>
-                    <Icon src={src} />
-                </PressableWithFeedback>
-                <View style={styles.collapsibleSectionBorder} />
-
-                <Collapsible isOpened={this.state.isExpanded}>
-                    <View>{this.props.children}</View>
-                </Collapsible>
-            </View>
-        );
-    }
-}
-
-CollapsibleSection.propTypes = propTypes;
-export default CollapsibleSection;
diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx
new file mode 100644
index 000000000000..434017f2a547
--- /dev/null
+++ b/src/components/CollapsibleSection/index.tsx
@@ -0,0 +1,55 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+import Collapsible from './Collapsible';
+
+type CollapsibleSectionProps = ChildrenProps & {
+    /** Title of the Collapsible section */
+    title: string;
+};
+
+function CollapsibleSection({title, children}: CollapsibleSectionProps) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    /**
+     * Expands/collapses the section
+     */
+    const toggleSection = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    const src = isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow;
+
+    return (
+        <View style={styles.mt4}>
+            <PressableWithFeedback
+                onPress={toggleSection}
+                style={[styles.pb4, styles.flexRow]}
+                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                accessibilityLabel={title}
+                hoverDimmingValue={1}
+                pressDimmingValue={0.2}
+            >
+                <Text
+                    style={[styles.flex1, styles.textStrong, styles.userSelectNone]}
+                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                >
+                    {title}
+                </Text>
+                <Icon src={src} />
+            </PressableWithFeedback>
+            <View style={styles.collapsibleSectionBorder} />
+            <Collapsible isOpened={isExpanded}>
+                <View>{children}</View>
+            </Collapsible>
+        </View>
+    );
+}
+
+export default CollapsibleSection;