title: Next js form data doesn't change according to the URL queries
body: <p>My question is that I am doing data filtering using formik and I change the query of the URL when I submit the form and it worked. now the problem is that when I open a new tab in the browser and paste the URL with the queries in it the form value &quot;the select element value&quot; does not change according to the URL queries. I tried to debug it but I failed.</p>
  <pre><code>import Head from &quot;next/head&quot;;
  import { Formik, Field, Form } from &quot;formik&quot;;
  import router, { useRouter } from &quot;next/router&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  export default function Home() {
    const { query } = useRouter();
       const [initialValues, setInitialValues] = useState({
       categories: query.categories || &quot;all-categories&quot;,
       color: query.color || &quot;all-color&quot;,
       size: query.size || &quot;all-size&quot;,
    });
   return (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;Create Next App&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
      &lt;/Head&gt;
      &lt;Formik
        initialValues={initialValues}
        onSubmit={(values) =&gt; {
          router.push({ pathname: &quot;/&quot;, query: values }, undefined, {
           shallow: true,
         });
       }}
       &gt;
        &lt;Form&gt;
        &lt;Field label=&quot;categories&quot; as=&quot;select&quot; name=&quot;categories&quot;&gt;
          &lt;option value=&quot;all-categories&quot;&gt;get all&lt;/option&gt;
          &lt;option value=&quot;electronics&quot;&gt;electronics&lt;/option&gt;
          &lt;option value=&quot;jewelery&quot;&gt;jewelery&lt;/option&gt;
          &lt;option value=&quot;men-clothing&quot;&gt;men's clothing&lt;/option&gt;
          &lt;option value=&quot;women-clothing&quot;&gt;women's clothing&lt;/option&gt;
        &lt;/Field&gt;
        &lt;Field label=&quot;categories&quot; as=&quot;select&quot; name=&quot;color&quot;&gt;
          &lt;option value=&quot;all color&quot;&gt;all color&lt;/option&gt;
          &lt;option value=&quot;red&quot;&gt;Red&lt;/option&gt;
          &lt;option value=&quot;black&quot;&gt;Black&lt;/option&gt;
          &lt;option value=&quot;white&quot;&gt;White&lt;/option&gt;
        &lt;/Field&gt;
        &lt;Field label=&quot;size&quot; as=&quot;select&quot; name=&quot;size&quot;&gt;
          &lt;option value=&quot;all-size&quot;&gt;all size&lt;/option&gt;
          &lt;option value=&quot;s&quot;&gt;S&lt;/option&gt;
          &lt;option value=&quot;m&quot;&gt;M&lt;/option&gt;
          &lt;option value=&quot;l&quot;&gt;L&lt;/option&gt;
          &lt;option value=&quot;xl&quot;&gt;XL&lt;/option&gt;
        &lt;/Field&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
       &lt;/Form&gt;
       );
             &lt;/Formik&gt;
      &lt;/div&gt;
     );
     }
  </code></pre>