Working on Collapse function on About page

src/components/Collapse/_collapse.scss

@@ -1,53 +1,41 @@
-.collapse{
+.collapsible {
+
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    &__content{
-
-        margin-bottom: 20px;
-        background-color: $grey-background-color;
-        border-radius: 5px;
-        width: 100%;
-        max-width: 1023px;
-        height: auto;
-
-        div{
-        position: relative;
+    margin-bottom: 20px;
+
+    &__header{
         background-color: $salmon-color;
+        padding: 6px;
+        cursor: pointer;
         border-radius: 5px;
         width: 100%;
         height: 30px;
+        position: relative;
 
-            h2{
-                @include typographie-collapse-title;
-                margin: 5.5px 0px 5.46px 11.51px;
-                position: absolute;
-                bottom: 0;
-                left: 0; 
-            }
-
-            img{
-                width: 18.46px;
-                height: 19.37px;
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                margin: 5.77px 5.19px 5.77px 0px; 
-
-                img > .rotate{
-                    transform: rotate(180deg);
-                }
-            }
+        h2{
+            @include typographie-collapse-title;
         }
 
-        p{
-            @include typographie-collapse-description;
-            padding: 17.31px 11.5px 53px 11.5px;
+        .fa-solid, .fas{
+            color: white;
+            position: absolute;
+            bottom: 5.77px;
+            right: 5.18px;
+          }
+    }
 
-            @media screen and (min-width: map-get($breakpoint, laptop)) {
-                padding-bottom: 10px;
-            }
-        }
+    &__content {
+        background-color: $grey-background-color;
+        @include typographie-collapse-description;
+        padding: 17.31px 11.5px 53px 11.5px;
+        border-radius: 0 0 5px 5px;
+        @media screen and (min-width: map-get($breakpoint, laptop)) {
+            padding-bottom: 10px;
+      }
+
     }
-}
+}
+
+

src/components/Collapse/index.jsx

@@ -1,13 +1,20 @@
-import Arrow from '../../assets/collapse-arrow.svg';
+import useCollapse from 'react-collapsed';
 
-export default function Collapse({ title, description }) {
+// https://www.npmjs.com/package/react-collapsed
+
+export default function Collapsible({ title, description }) {
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
   return (
-    <article className="collapse__content">
-      <div>
+    <article className="collapsible">
+      <div className="collapsible__header" {...getToggleProps()}>
         <h2>{title}</h2>
-        <img className='rotate' src={Arrow} alt="arrow-icone" />
+        <div className="icon">
+          <i className={'fas fa-chevron-' + (isExpanded ? 'up' : 'down')}></i>
+        </div>
+      </div>
+      <div {...getCollapseProps()}>
+        <p className="collapsible__content">{description}</p>
       </div>
-      <p>{description}</p>
     </article>
   );
 }