Addressing Helmet crash

src/components/Metadata/__snapshots__/test.js.snap

@@ -5,13 +5,15 @@ exports[`Metadata rendering 1`] = `
   <span
     data-component="HelmetWrapper"
     data-props="{
-  \\"htmlAttributes\\": {}
+  \\"title\\": \\"Regexper\\",
+  \\"htmlAttributes\\": {},
+  \\"meta\\": [
+    {
+      \\"name\\": \\"description\\"
+    }
+  ]
 }"
-  >
-    <title>
-      Regexper
-    </title>
-  </span>
+  />
 </DocumentFragment>
 `;
 
@@ -20,16 +22,15 @@ exports[`Metadata rendering with a title and description 1`] = `
   <span
     data-component="HelmetWrapper"
     data-props="{
-  \\"htmlAttributes\\": {}
+  \\"title\\": \\"Regexper - Testing\\",
+  \\"htmlAttributes\\": {},
+  \\"meta\\": [
+    {
+      \\"name\\": \\"description\\",
+      \\"content\\": \\"Test description\\"
+    }
+  ]
 }"
-  >
-    <title>
-      Regexper - Testing
-    </title>
-    <meta
-      content="Test description"
-      name="description"
   />
-  </span>
 </DocumentFragment>
 `;

src/components/Metadata/index.js

@@ -5,14 +5,20 @@ import { Helmet } from 'react-helmet';
 
 const Metadata = ({ title, description }) => {
   const { i18n } = useTranslation();
-  const htmlAttributes = {
+  const helmetProps = {
+    title: title ? `Regexper - ${ title }` : 'Regexper',
+    htmlAttributes: {
       lang: i18n.language
+    },
+    meta: [
+      {
+        name: 'description',
+        content: description
+      }
+    ]
   };
 
-  return <Helmet htmlAttributes={ htmlAttributes }>
-    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
-    { description && <meta name="description" content={ description } /> }
-  </Helmet>;
+  return <Helmet { ...helmetProps }></Helmet>;
 };
 
 Metadata.propTypes = {