Storybook Navbar component breaks through useRouter() - next.js

Question

I have a Navbar with a Navigation Links, which are highlighted as active, depending on the page a user is on.
import { useRouter } from 'next/dist/client/router'
const navigation = [
{ name: 'Home', url: '/', active: true},
{ name: 'Quiz', url:'/quiz', active: false}
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export const Navigation = () => {
const router = useRouter();
return (
<div className="flex space-x-4 justify-self-center">
{navigation.map((item) => (
<a
key={item.name}
href={item.url}
className={`px-3 py-2 rounded-md text-sm font-medium ${
router.asPath === item.url ? "bg-gray-900 text-white" : 'text-gray-300 hover:text-gray-700'
}`}
aria-current={item.active? 'page' : undefined}
>
{item.name}
</a>
))}
</div>
)
}
It works as is should, but I can't create a story for it, because of the Next Router. I get the following error: Cannot read property 'asPath' of null.
I tried to follow the instructions in the answer I found here: How to use NextJS's 'useRouter()' hook inside Storybook , but unfortunately it didn't give me the result I am striving for. So basically my "Story-Navbar" shouldn't redirect, but just highlight the Navigation Link, while I click on it. Is that possible? Here is the story for Navigation:
import { Navigation } from './Navigation';
export default {
title: 'Example/Navigation',
component: Navigation,
};
export const DefautlNavigation = () => {
return (
<Navigation />
)
}

Answer 1

The storybook Next.js router add-on works for useRouter() hook. Here is the example in their docs:
import { withNextRouter } from 'storybook-addon-next-router';
import MyComponentThatHasANextLink from '../component-that-has-a-next-link';
export default {
title: 'My Story',
decorators: [withNextRouter], // not necessary if defined in preview.js
};
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = () => <MyComponentThatHasANextLink />;
Example.story = {
parameters: {
nextRouter: {
path: '/profile/[id]',
asPath: '/profile/lifeiscontent',
query: {
id: 'lifeiscontent',
},
},
},
};