`memo` breaks the typing

[Noitidart]

trafficstars

Thanks for this awesome article on logrocket.

I tried wrapping my component with memo, but it breaks the typing. Can you please advise?

import {
  memo, type ComponentPropsWithoutRef, type ElementType,
  type PropsWithChildren
} from 'react';


type TBadgeBaseProps<T extends ElementType> = PropsWithChildren<{
  as?: T;
  color: 'primary' | 'gray' | 'green' | 'red' | 'yellow' | 'blue' | 'orange';
}>;
type TBadgeProps<T extends ElementType> = TBadgeBaseProps<T> &
  Omit<ComponentPropsWithoutRef<T>, keyof TBadgeBaseProps<T>>;

const Badge = memo(function Badge<T extends ElementType = 'span'>({
  as,
  className,
  color,
  ...rest
}: TBadgeProps<T>) {
});

const test = <Badge href="foo">Hello</Badge>;

In the const test, it's not properly saying that href is not allowed.