router.push, бесконечный ререндер

Всем привет. Нужна помощь с вшиванием параметров в url строку. Сейчас я реализовал это через "window.history.pushState". Но проблема в том, что когда в браузере нажимаешь назад, url меняется на предыдущий, но перехода не происходит. Думаю для того чтобы был переход, нужно делать это через хук useRouter из next. Но проблема в том, что когда я им пользуюсь в useEffect, вместо "window.history.pushState" (router.push(?entity=${activeTab}${term ? &term=${term} : ''});), страница начинает бесконечный ререндер. Сталкивался кто с таким? много времени убил на это, буду очень благодарен за помощь.

    const Search: FC = () => {
  const searchParams = useSearchParams();
  const [term, setTerm] = useState<string>(searchParams.get('term') || '');
  const [activeTab, setActiveTab] = useState<string>(
    searchParams.get('entity') || 'beers'
  );

  const tabsItems = [
    { value: 'beers', option: 'Пиво' },
    { value: 'breweries', option: 'Пивоварни' },
    { value: 'users', option: 'Любители' },
    { value: 'bars', option: 'Бары' },
    { value: 'celebrities', option: 'Пивные селебрити' },
  ];

  const onTabChange = (tab: ITab) => {
    setActiveTab(tab.value);
  };

  useEffect(() => {
    window.history.pushState(
      null,
      '',
      `?entity=${activeTab}${term ? `&term=${term}` : ''}`
    );
  }, [activeTab, term]);

  return (
    <section>
      <Tabs
        items={tabsItems}
        activeTab={activeTab}
        onChange={onTabChange}
        className={styles.tabs}
        tabClassName={styles.tab}
        activeClassName={styles.active}
      />

      <Actions term={term} setTerm={setTerm} />

      {activeTab === 'beers' && <Beers term={term} />}
      {activeTab === 'breweries' && <Breweries term={term} />}
      {activeTab === 'users' && <Users term={term} />}
      {activeTab === 'bars' && <div>Bars Bars</div>}
      {activeTab === 'celebrities' && <div>Сelebrities Сelebrities</div>}
    </section>
  );
};

export default Search;