router.beforePopState is never called

What version of Next.js are you using?

10.2

What version of Node.js are you using?

16.4

What browser are you using?

Chrome

What operating system are you using?

Mac OS

How are you deploying your application?

Other platform

Describe the Bug

I’m trying to use

  const router = useRouter();
  useEffect(() => {
    router.beforePopState(() => {
      alert('Before pop state!');
      return false;
    });
  });

To capture the “Back Button Pressed” on browser but it always navigate back without hitting the function.

Do I need to do something else in order to make this work?

Expected Behavior

It should trigger an alert when the user hits the back button of browser.

To Reproduce

Create a page on next and add this code