How do I get conditional types to show proper error for required props

Question

I have a simple component and two of the props are conditional based on the existence of the other. It is simple enough to get this working, however the error message for the other required prop seems weak.

Component:

type CommonProps = {
  classes?: string | string[];
  htmlFor?: string;

  label: string;
};

type ConditionalProps =
  | {
      optional?: boolean;
      required?: never;
    }
  | {
      optional?: never;
      required?: boolean;
    };

export type LabelProps = CommonProps & ConditionalProps;

export const Label: React.FC<LabelProps> = ({ classes, htmlFor, label, optional, required }) => {
  const _classes = classNames(classes && classes);

  return (
    <Element as={ELEMENT_OPTION_TYPE.LABEL} className={_classes || undefined} htmlFor={htmlFor}>
      {label}
      {required && (
        <Element as={ELEMENT_OPTION_TYPE.SPAN}>
          {"*"}
        </Element>
      )}
      {optional && (
        <Element as={ELEMENT_OPTION_TYPE.SPAN}>
          {"Optional"}
        </Element>
      )}
    </Element>
  );
};

Problem:

As seen in the screen shot below, the initial error message gives no indication that the label prop is required. Normally the error message would be clear regarding required props but for whatever reason with this pattern it is not clear.

What I have tried. I have tried many permutations including trying to use interfaces but have not been able to strike a method that works. I also googled and have not found a solution. I thought that updating the CommonProps to an interface as seen below might help and it has the same result

interface CommonProps {
  classes?: string | string[];
  htmlFor?: string;

  label: string;
};

type ConditionalProps =
  | {
      optional?: boolean;
      required?: never;
    }
  | {
      optional?: never;
      required?: boolean;
    };

export type LabelProps = CommonProps & ConditionalProps;

Playground Link

https://playcode.io/1444768

Thanks in advance.