Working around Edge not having array.flatMap()

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "src/index.tsx",
   "dependencies": {
+    "array.prototype.flatmap": "^1.2.1",
     "canvas-toBlob": "^1.0.0",
     "d3": "^5.7.0",
     "detect-browser": "^4.1.0",
@@ -21,6 +22,7 @@
     "topola": "^2.2.2"
   },
   "devDependencies": {
+    "@types/array.prototype.flatmap": "^1.2.0",
     "@types/d3": "^5.5.0",
     "@types/file-saver": "^2.0.0",
     "@types/history": "^4.7.2",

src/details.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {GedcomData} from './gedcom_util';
 import {GedcomEntry} from 'parse-gedcom';
 import {FormattedMessage} from 'react-intl';
+import flatMap from 'array.prototype.flatmap';
 
 interface Props {
   gedcom: GedcomData;
@@ -114,12 +115,11 @@ function getDetails(
   tags: string[],
   detailsFunction: (entry: GedcomEntry, tag: string) => JSX.Element | null,
 ): JSX.Element[] {
-  return tags
-    .flatMap((tag) =>
-      entries
-        .filter((entry) => entry.tag === tag)
-        .map((entry) => detailsFunction(entry, tag)),
-    )
+  return flatMap(tags, (tag) =>
+    entries
+      .filter((entry) => entry.tag === tag)
+      .map((entry) => detailsFunction(entry, tag)),
+  )
     .filter((element) => element !== null)
     .map((element) => <div className="ui segment">{element}</div>);
 }