title: Can't resolve react-helmet-async in React 18
body: <p>I'm in the process of updating my app from React 17 to React 18 (it is a CRA app, if that matters). I'm using <code>react-helmet-async</code> to put together the <code>head</code> tags. However, now when I try to run the app I get this error:</p>
  <pre><code>Module not found: Error: Can't resolve 'react-helmet-async'
  </code></pre>
  <p>I gather from the fact that <code>react-helmet-async</code> is missing from my <code>package.json</code> file that the library was formerly packaged with React or another library I'm using and no longer is. I know I could add it to my <code>package.json</code> file but if there is a more idiomatic way to achieve the same thing in React 18, I'd rather do it that way.</p>
  <p>There is a guide <a href="https://github.com/reactwg/react-18/discussions/106" rel="nofollow noreferrer">here</a> on upgrading this stuff to React 18, however, I'm so far from understanding anything written in there that I don't even know where to start figuring out what I need to do.</p>
  <p>My app has a pretty standard use case and doesn't include any nested <code>Helmet</code> components or anything like that. It also doesn't use server-side rendering (although I'm planning to implement that in the near future, so it would be good to use an approach that is compatible with SSR). The actual code in my project is broken up over multiple components but amounts to this:</p>
  <pre class="lang-js prettyprint-override"><code>import { Routes, Route, BrowserRouter as Router } from 'react-router-dom'
  import { HelmetProvider, Helmet } from 'react-helmet-async'
  
  const pages = [/* array of objects */]
  
  const App = () =&gt; {
    &lt;Router basename={process.env.PUBLIC_URL}&gt;
      &lt;HelmetProvider&gt;
        {pages.map(
          ({ pageId, title, description, jsx, path }) =&gt; {
            return(
              &lt;Route exact path={path} key={pageId}&gt;
                &lt;Helmet&gt;
                  &lt;html lang='en'&gt;
  
                  &lt;title&gt;{title}&lt;/title&gt;
                  &lt;meta name='description' content={description} /&gt;
                &lt;/Helmet&gt;
                &lt;AppProvider&gt;{jsx}&lt;/AppProvider&gt;
              &lt;/Route&gt;
            )
          }
        )}
      &lt;/HelmetProvider&gt;
    &lt;/Router&gt;
  }
  </code></pre>
  <p>What do I need to do to migrate away from <code>react-helmet-async</code> and onto whatever the React 18 way is?</p>