Custom Menu.Item

[codedbyjordan]

Hello, I am trying to create a custom Menu.Item component with React and TypeScript. What I have now works, but TS is throwing this error. How can I fix this?

Type '{ className: string; } & Omit<DropdownItemProps<TTag>, "children"> & { children: (renderProps: ItemRenderPropArg) => ReactElement<any, string | JSXElementConstructor<...>>; }' is not assignable to type 'IntrinsicAttributes & (Props<DropdownItemProps<TTag>["as"], ItemRenderPropArg, MenuItemPropsWeControl> & { ...; })'.
  Type '{ className: string; } & Omit<DropdownItemProps<TTag>, "children"> & { children: (renderProps: ItemRenderPropArg) => ReactElement<any, string | JSXElementConstructor<...>>; }' is not assignable to type 'IntrinsicAttributes & Omit<PropsOf<DropdownItemProps<TTag>["as"]>, PropsWeControl | "onPointerLeave"> & OurProps<...> & ClassNameOverride<...> & { ...; }'.
    Type '{ className: string; } & Omit<DropdownItemProps<TTag>, "children"> & { children: (renderProps: ItemRenderPropArg) => ReactElement<any, string | JSXElementConstructor<...>>; }' is not assignable to type 'Omit<PropsOf<DropdownItemProps<TTag>["as"]>, PropsWeControl | "onPointerLeave">'

My component

import { Menu } from '@headlessui/react';
import { Props, ReactTag } from '@headlessui/react/dist/types';
import { ElementType, ReactElement } from 'react';

type DropdownItemProps<TTag extends ReactTag = 'div'> = {
  as?: TTag;
} & Props<TTag>;

export default function DropdownItem<TTag extends ElementType>(
  props: DropdownItemProps<TTag>
) {
  const { children, ...rest } = props;

  return (
    <Menu.Item className="..." {...rest}>
      {(renderProps) =>
        (typeof children === 'function'
          ? children(renderProps)
          : children) as ReactElement
      }
    </Menu.Item>
  );
}