Как отфильтровать значения реквизита из объединения интерфейсов

Я пытаюсь использовать реквизиты из (импортного) типа союза и использовать их в реагирующем компоненте, чтобы конечный потребитель в финале app мог «фильтровать» их в самовнушении. и подтвердите.

Типы:

export type Clothes =
  | Shirt
  | Dress
  | Pants

export interface Shirt {
  size: "M" | "S";
  name: "Shirt";
}

export interface Dress {
  size: "XS";
  name: "Dress";
}

export interface Pants {
  size: "L" | "M" | "S";
  name: "Pants";
}

Реагировать компонент:

export const Clothe = (props: Clothes & {className?: string}) => {
    return (
      <div className = {props.className}>
        <span>{`${props.name} ${props.size}`}</span>
      </div>     
    )
}

Потребительское приложение:

<Clothe name = "Shirt" size = "L" />// this should be invalid

Clothe должен иметь только M и S в качестве размера из-за «имени», но союз дает мне все размеры на выбор (L, M, S, XS)

Например. Если я выберу неправильную комбинацию реквизитов size и name, должна появиться ошибка «ts».

Автозаполнение также должно отфильтровывать size поддержку для определенного типа. в зависимости от того, какой name реквизит выбран (и желательно наоборот — чтобы size реквизит отфильтровывал только все name этого размера).

Как этого добиться?

рабочий пример