Capture hashchange event in a NextJs page

So I’m currently working on a small project that requires the implementation of multiple tabs being stacked over each other while only one is active and visible. The visibility of each tab will be determined by the current hash in the url.

I’m using the hashchange event to process the hash change and determine the active card, but I have troubles firing the event. What am I missing? I am using the app router directory for my project.

I created this “hook” to get the hash state:

import { useState, useEffect } from 'react';

export const useHash = () => {
    const [hash, setHash] = useState(window.location.hash);
    useEffect(() => {
        const onHashChange = () => {
            console.log("hash hook");
            setHash(window.location.hash);
        };
        window.addEventListener('hashchange', onHashChange);
        return () => window.removeEventListener('hashchange', onHashChange);
    }, []);
    return hash;
};

And then tried using it in my page.tsx, where tabs is an array of predefined tabs that I want to switch between:

export default function Home(): JSX.Element {
  const defaultTab = tabs[0].anchor;
  const hash = useHash();
  const [activeTab, setActiveTab] = useState(hash ? hash : defaultTab);

  useEffect(() => {
    const tab = hash.slice(1);
    if (tab)
      setActiveTab(tab);
  }, [])

  return ( /* jsx code */ )
}

With this logic, I was hoping to have the event in the hook fire (and log “hash hook”) every time the hash changes, but it is doing nothing. Not even after a reload.