Роутинг с помощью useRouter() в next.js

При переходе на страницу, useRouter() не отображает некоторые данные

Имеется компонент поиска, который при нажатии enter переносит нас на другую страницу:

<input className={styles.input}
        placeholder=""
        type="text"
        name="search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        onKeyDown={handleKeyDown} />

const [search, setSearch] = useState<string>('');
const router = useRouter();

const goToSearch = () => {
    router.push({
        pathname: '/search',
        query: {
            search: search
        }
    });
};

const handleKeyDown = (e: any) => {
    if (e.key == 'Enter') {
        goToSearch();
    }
};

В папке pages есть файл search.tsx, который отрисовывает страницу после нашего перехода.

export const Search = () => {
    const router = useRouter()

    console.log(router)
    return (
        <>Seacrh</>
    );
}

export default Search;

Но при этом в консоль выводится

ServerRouter {
  route: '/search',
  pathname: '/search',
  query: {},
  asPath: '/search',
  isFallback: false,
  basePath: '',
  locale: undefined,
  locales: undefined,
  defaultLocale: undefined,
  isReady: false,
  domainLocales: undefined,
  isPreview: false,
  isLocaleDomain: false
}

Вопрос: как мне получить query: {search: search}?