Here's a simplified component code:

type Props = (DropdownType | TextType | NumberType | ColorType | CheckboxType) &
  SharedType;

const Component: FC<Props> = (_props): ReactElement => {
  return <></>;
};

type Args = TextType | NumberType | DropdownType | CheckboxType | ColorType;
export const generateComponent = (args: Args): ReactElement => {
  return (
    <Component label="label" name="name" {...args}>
      {args.children}
    </Component>
  );
};

Here are the types:

type SharedDisplayAndEditTypes = {
  label: string;
};

export type SharedType = SharedDisplayAndEditTypes & {
  required?: boolean;
  validationMessage?: string;
  name: string;
  disabled?: boolean;
};

export type TextType = {
  type: "text";
  children: string;
};

export type NumberType = {
  type: "number";
  children: number;
};

export type DropdownType = {
  type: "dropdown";
  options: string[];
  children: string;
};

export type ColorType = {
  type: "color";
  children: string;
};

export type CheckboxType = {
  type: "checkbox";
  children: boolean;
};

And here's the codesandbox

I am trying to create a function, which renders my component (for tests. This is a simplified example). I thought that if I just kind of mash together the props and args it'll all work fine, but obviously, I'm missing something, but am not sure what.

The error I'm getting is similar to the sandbox example:

Types of property 'children' are incompatible.
    Type 'string | number | boolean' is not assignable to type 'string & ReactNode'.
      Type 'number' is not assignable to type 'string & ReactNode'

Basically the types don't add up, and I have no idea why, since I'm not using ReactNode anywhere as a prop type