Error with ref assignment in Compcomponent within Sidebar: Type 'string' is not assignable

[cidkumagai]

I am encountering a TypeScript error when trying to assign a ref in the Comp component within my Sidebar implementation. The error message is as follows:

Type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null' is not assignable to type '((string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>) & (((instance: HTMLElement | null) => void) | RefObject<...>)) | null | undefined'.
  Type 'string' is not assignable to type '((string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>) & (((instance: HTMLElement | null) => void) | RefObject<...>)) | null | undefined'.ts(2322)
index.d.ts(161, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & SlotProps & RefAttributes<...>'

This error occurs when using the Comp component, which conditionally renders either a Slot or an element based on the asChild prop. The ref assignment seems to be causing a type mismatch. I would appreciate any guidance on how to resolve this issue. Thank you!

[cidkumagai]

By changing the type definition to use ComponentPropsWithRef<'button'>, the error disappears:

ComponentPropsWithRef<'button'> & {
  asChild?: boolean;
  showOnHover?: boolean;
}

Does this seem like the correct fix? I would appreciate any feedback on whether this approach is appropriate or if there might be a better solution.