Passing props using userouter on Next.js - react-hooks

Question

I've been following this guide on how to render props from my sidebar to my title header based on this links:
Dynamic Navigation in Next.js
But it doesnt show up on my title component
Here is my current settings. Basically I wanted to change the title on my header based on the sub-url that were defined in my arrays
From sidebar.tsx
import { navItems } from "../../static/NavItems";
const Sidebar = () => {
const [activeIcon, setActiveIcon] = useState("");
const router = useRouter();
return (
<Wrapper>
<LogoContainer>
<Logo>
<Image src={logo} alt="Logo" width={200} />
</Logo>
</LogoContainer>
<NavItemsContainer>
{navItems.map((nav, i) => (
<NavItem key={i} onClick={() => setActiveIcon(nav.title)}>
<NavIcon style={{ color: nav.title === activeIcon && "#3773f5" }}>
{nav.icon}
</NavIcon>
<NavTitle>
<Link as={nav.as} href={nav.path}>
{nav.title}
</Link>
</NavTitle>
</NavItem>
))}
</NavItemsContainer>
</Wrapper>
);
};
from title component
import { useRouter } from "next/router";
const Title = ({ title }) => {
const router = useRouter();
return <div>{{router.pathname === "/" ? title : ""}</div>;
};
So in my header, I've just import the component and pass it as a props like this
import { Title } from '../title.tsx';
const Header = ({ title }) => {
return (
<Title title={title} />
)
is there anything that I missed here?