Creating a custom component that extends a styled components props loses "as" prop inference

[Matt Derrick]

When creating a custom component that extends a styled component using React.ComponentProps to define its props, the "as" is omitted as per this discussion but this breaks the prop types of the custom component which do not update. Maybe this is why the "as" prop is excluded to begin with?

const ButtonBase = styled("button", {})

interface CustomButtonProps extends React.ComponentProps<typeof ButtonBase> {
  as?: React.ElementType; //This is omitted and has to be defined manually which causes the problem below
}
const CustomButton = (props: CustomButtonProps) => {
  return <ButtonBase {...props} />;
};

<ButtonBase as="a" href="/">
    Yep href is a valid prop
</ButtonBase>
<CustomButton as="a" href="/">
  Nope href is not a valid prop
</Button>

Working example can be found here.

I would like the props for the React.ElementType passed in the as prop to behave the same as using ButtonBase directly. Are there any utility types that can help with this? I'd even be OK with passing in a generic at the call site if it means I get prop inference.

Thanks