[React 18] Ref type from `useDetails` is not compatible with Details

[dgreif]

Description

With React 18, the ref value from useDetails is not compatible with the ref prop of Details.

error TS2769: No overload matches this call.
 Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof DetailsHTMLAttributes<...>> & { ...; } & SxProp, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
 Type '{ children: (false | Element | undefined)[]; open: boolean; onToggle: (e: SyntheticEvent<HTMLElement, Event>) => void; sx: { ':first-child summary': { ...; }; ':last-child summary': { ...; }; }; ref: RefObject<...>; }' is not assignable to type 'Omit<Omit<Pick<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof DetailsHTMLAttributes<...>> & { ...; } & SxProp, never> & Partial<...>, "theme">'.
 Types of property 'ref' are incompatible.
 Type 'RefObject<HTMLElement>' is not assignable to type '((instance: HTMLDetailsElement | null) => void) | RefObject<HTMLDetailsElement> | null | undefined'.
 Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDetailsElement>'.
 Property 'open' is missing in type 'HTMLElement' but required in type 'HTMLDetailsElement'.
 Overload 2 of 2, '(props: StyledComponentPropsWithAs<"details", any, SxProp, never, "details", "details">): ReactElement<StyledComponentPropsWithAs<"details", any, SxProp, never, "details", "details">, string | JSXElementConstructor<...>>', gave the following error.
 Type '{ children: (false | Element | undefined)[]; open: boolean; onToggle: (e: SyntheticEvent<HTMLElement, Event>) => void; sx: { ':first-child summary': { ...; }; ':last-child summary': { ...; }; }; ref: RefObject<...>; }' is not assignable to type 'Omit<Omit<Pick<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof DetailsHTMLAttributes<...>> & { ...; } & SxProp, never> & Partial<...>, "theme">'.
 Types of property 'ref' are incompatible.
 Type 'RefObject<HTMLElement>' is not assignable to type '((instance: HTMLDetailsElement | null) => void) | RefObject<HTMLDetailsElement> | null | undefined'.

I think the main issue is that the default ref created in the hook is of type HTMLElement, where the Detail ref knows it should be of type HTMLDetailsElement

Relates to #2536

Steps to reproduce

1. Install React 18 and PRC
2. Create a component that uses both useDetails and Details

function Widget() {
 const {getDetailsProps, open} = useDetails({closeOnOutsideClick: false})
 const detailsProps = getDetailsProps()
 return <Details {...detailsProps} />
}

Version

v35.14.2

Browser

No response

[lesliecdubs]

@joshblack should we roll this task into #2536?