fix(app): replace remark with react-markdown

app/package.json

@@ -49,6 +49,7 @@
     "react-error-boundary": "^4.0.10",
     "react-i18next": "13.5.0",
     "react-intersection-observer": "^8.33.1",
+    "react-markdown": "9.0.1",
     "react-redux": "8.1.2",
     "react-router-dom": "5.3.4",
     "react-select": "5.4.0",
@@ -57,8 +58,6 @@
     "redux": "4.0.5",
     "redux-observable": "1.1.0",
     "redux-thunk": "2.3.0",
-    "remark": "9.0.0",
-    "remark-react": "4.0.3",
     "reselect": "4.0.0",
     "rxjs": "^6.5.1",
     "semver": "5.5.0",

app/src/molecules/ReleaseNotes/index.tsx

@@ -1,26 +1,14 @@
 import * as React from 'react'
-import remark from 'remark'
-import reactRenderer from 'remark-react'
+import Markdown from 'react-markdown'
+
 import { StyledText } from '@opentrons/components'
+
 import styles from './styles.module.css'
+
 export interface ReleaseNotesProps {
   source?: string | null
 }
 
-// ToDo (kk:09/22/2023) This component should be updated in the future
-// since the package we use hasn't been updated more than 2 years.
-// Also the creator recommends users to replace remark-react with rehype-react.
-const renderer = remark().use(reactRenderer, {
-  remarkReactComponents: {
-    div: React.Fragment,
-    h2: HeaderText,
-    ul: React.Fragment,
-    li: ParagraphText,
-    p: ParagraphText,
-    a: ExternalLink,
-  },
-})
-
 const DEFAULT_RELEASE_NOTES = 'We recommend upgrading to the latest version.'
 
 export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
@@ -29,7 +17,18 @@ export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
   return (
     <div className={styles.release_notes}>
       {source != null ? (
-        renderer.processSync(source).contents
+        <Markdown
+          components={{
+            div: undefined,
+            ul: undefined,
+            h2: HeaderText,
+            li: ParagraphText,
+            p: ParagraphText,
+            a: ExternalLink,
+          }}
+        >
+          {source}
+        </Markdown>
       ) : (
         <p>{DEFAULT_RELEASE_NOTES}</p>
       )}