How to wrap <Link /> in a styled component and sync the active state? And get typesafety

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}