Having trouble getting typescript working with modified components

[AlexFrazer]

Here's the general idea: I want to use a headless ui component and simply apply the classnames which I see fit, while supporting all the features of headlessui, including the as property which I find to be very helpful for my use case

I was running into a problem where I believe the problem was that className is potentially not there, because ElementType could extend ComponentType and ComponentType does not necessarily extend { className?: string }. This is reinforced by finding this in the type definitions:

type ClassNameOverride<TTag extends ReactTag, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, 'className'> ? {
    className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string);
} : {};

So, I figured the problem is that I need to first check for the className before adding "my own".

import { type ElementType } from "react";
import { Input as HeadlessInput, type InputProps as HeadlessInputProps } from "@headlessui/react";

type InputProps<T extends ElementType = "input"> = HeadlessInputProps<T>

export default function Input<T extends ElementType = "input">(props: InputProps<T>) {
  if ('className' in props) {
    return (
      <HeadlessInput
        {...props}
        className={(bag) => cx("px-4", "py-2", typeof className === "function" ? className(bag) : className)}
      />
    );
  }
  return <HeadlessInput {...props} />;
}

However, it seems like this isn't working either, saying that props.className is going to resolve to unknown.

I'm looking for a good solution to this, but it seems like a fairly common use case (basically just extending the existing system). Has anyone already solved this problem? If so, how?