I don't understand how to integrate useHref and Breadcrumbs.Item (unstable component)

[ogonkov]

I'm trying to wrap Breadcrumb.Item to use it with useHref, but it seems impossible, because Breadcrumbs seems copy my props, and recreate default Breadcrumbs.Item component, w/out my logic:

uikit/src/components/lab/Breadcrumbs/Breadcrumbs.tsx

Lines 236 to 245 in 6a09bbc

	<BreadcrumbItem
	{...child.props}
	key={key}
	current={isCurrent}
	disabled={props.disabled}
	onAction={handleAction}
	navigate={navigate}
	>
	{child.props.children}
	</BreadcrumbItem>

What is my code looks like:

RouterBreadcrumbs.tsx

import type {FC} from 'react';
import {
    unstable_Breadcrumbs as Breadcrumbs,
    type unstable_BreadcrumbsItemProps as BreadcrumbsItemProps,
    type unstable_BreadcrumbsProps as BreadcrumbsProps,
} from '@gravity-ui/uikit/unstable';
import {
    type GoToRoutePayload,
    type LinkProps,
    useHref,
    useNavigate,
} from '@foobar/router';

interface RouterBreadcrumbsProps extends Omit<BreadcrumbsProps, 'navigate'> {}

const RouterBreadcrumbsComponent: FC<RouterBreadcrumbsProps> = (props) => {
    const navigate = useNavigate();

    return <Breadcrumbs {...props} navigate={navigate} />;
};

RouterBreadcrumbsComponent.displayName = 'Router(Breadcrumbs)';

interface RouterBreadcrumbsItemProps
    extends Omit<BreadcrumbsItemProps, 'href'>,
        Pick<LinkProps, 'to'> {}

const RouterBreadcrumbsItem: FC<RouterBreadcrumbsItemProps> = ({to, target, ...props}) => {
    const routeDescriptor = (to || '') as GoToRoutePayload;
    const href = useHref(routeDescriptor);

    return <Breadcrumbs.Item {...props} href={href} />;
};

RouterBreadcrumbsItem.displayName = 'Router(Breadcrumbs.Item)';

export const RouterBreadcrumbs = Object.assign(RouterBreadcrumbsComponent, {
    Item: RouterBreadcrumbsItem,
});