In Next.js 9.3 I need to access query on initial render and pass the result of query to `next/head` to change title and description of the page.

My component is getting query from `useRouter` hook. Unfortunately the query object is `{ amp: undefined }` on initial render. Immediately after initial render, another render happens and it has all the required details. I started using this workaround with checking if route is ready <https://github.com/zeit/next.js/issues/8259#issuecomment-544912889>, but this won't work for `next/head` as the values will be undefined.

```
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

function isRouterReady(router) {
  return router.asPath !== router.route;
}

export default Component = () => {
  const router = useRouter();
  const { query } = router;

  useEffect(() => {
    if (isRouterReady(router)) {
      // router.query is populated here with name
    }
  }, [query]);

  return (
      <Head>
        // query has only amp key, but not my name
        <title>{query.name}</title>
        <meta
          name="description"
          content={query.name}
        />
      </Head>
  );
};

```

Is there any way how I can correctly pass values from router query to `next/head`'s title and meta description?