Composing with asChild - TypeScript missing required props

[RemyMachado]

I'm struggling to correctly type the following component. TypeScript don't understand that the props will be merged/forwarded to <MyTrigger />.

// this component takes a combination of the two components' props
type Props = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger> &
  ComponentProps<typeof MyTrigger>;

export const TabsTriggerWithComposition = forwardRef<HTMLButtonElement, Props>(
  ({ children, ...restProps }, ref) => (
    <Tabs.Trigger asChild {...restProps} ref={ref}>
      <MyTrigger as="button">{children}</MyTrigger> // error: missing [...] required props
    </Tabs.Trigger>
  )
);

How one would type this correctly?

I could spread the props to both components, but I'm affraid it would result in a confusing and unoptimized code...

[vladmoroz]

You can't really do that, you'd have to destructure and forward the props specific to Tabs.Trigger and the props specific to MyTrigger separately.