Как с помощью TypeScript в React компоненте описать входящие props, если жду разные? (в зависимости от props.type: "bigCard" | "smallCard" )

interface BigCardProps {
  type: "bigCard";
  title: string;
  description: string;
  imageUrl: string;
}

interface SmallCardProps {
  type: "smallCard";
  title: string;
  imageUrl: string;
}

type CardProps = BigCardProps | SmallCardProps;

const Card = (props: CardProps) => {
  if (props.type === "bigCard") {
    return (
      <div>
        <h1>{props.title}</h1>
        <p>{props.description}</p>
        <img src={props.imageUrl} alt={props.title} />
      </div>
    );
  } else {
    return (
      <div>
        <h1>{props.title}</h1>
        <img src={props.imageUrl} alt={props.title} />
      </div>
    );
  }
};

BigCardProps

SmallCardProps

CardProps

BigCardProps

SmallCardProps

Card

if

"bigCard"

"smallCard"