Typescript error when using the Type "SlotProps"

Steps to reproduce

Background: we try to utilize the utilities slots function provided in material library, to setup the control level components.

Steps:

1. please check the live example and look at typescript error
   https://codesandbox.io/p/devbox/mui-slots-forward-ref-type-issue-forked-qyl7t9?file=%2Findex.tsx%3A61%2C30&workspaceId=ws_XjwBjMe1qQqiwHMeyBFRCJ

Type '{ slotProps: { root?: SlotProps<React.ElementType<PaperProps<"div", {}>, keyof React.JSX.IntrinsicElements>, object, CardHeaderProps> | undefined; }; slots: Partial<...> | undefined; }' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; slots?: { root?: ElementType<any, keyof IntrinsicElements> | undefined; } | undefined; slotProps?: { ...; } | undefined; }'. The types of 'slotProps.root' are incompatible between these types. Type 'SlotProps<ElementType<PaperProps<"div", {}>, keyof IntrinsicElements>, object, CardHeaderProps> | undefined' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; } | ((ownerState: { slots?: Partial<{ root: ElementType<any, keyof IntrinsicElements>; }> | undefined; slotProps?: { ...; } | undefined; sx?: SxProps<...> | undefined; }) => { ...; }) | undefined'. Type 'Partial<Omit<PaperOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, "style" | ... 6 more ... | "variant"> & { ...; }, "ref"> & RefAttributes<...>> & SlotCommonProps & object' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; } | ((ownerState: { slots?: Partial<{ root: ElementType<any, keyof IntrinsicElements>; }> | undefined; slotProps?: { ...; } | undefined; sx?: SxProps<...> | undefined; }) => { ...; }) | undefined'. Type 'Partial<Omit<PaperOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, "style" | ... 6 more ... | "variant"> & { ...; }, "ref"> & RefAttributes<...>> & SlotCommonProps & object' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; }'. Types of property 'ref' are incompatible. **Type 'LegacyRef<Component<PaperProps<"div", {}>, any, any>> | undefined' is not assignable to type 'Ref<any> | undefined'.** Type 'string' is not assignable to type 'Ref<any> | undefined'.typescript(2322) useSlot.d.ts(65, 5): The expected type comes from property 'externalForwardedProps' which is declared here on type '{ ref: ForwardedRef<any>; } & { className: ClassValue | ClassValue[]; elementType: StyledComponent<MUIStyledCommonProps<Theme> & { ...; }, Pick<...>, {}>; ... 4 more ...; internalForwardedProps?: any; }'

I believe the error come with the conflict of useSlot and SlotProps, which contain LegacyRef and Ref

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: SlotProps typescript